6 Replies - 1602 Views - Last Post: 08 May 2012 - 08:11 PM

#1 smaboud  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 119
  • Joined: 22-April 12

Delete a dynamically generated html <tr> using jquery

Posted 08 May 2012 - 03:39 AM

Hi

I have a table filled out with data from the mysql DB, I have a DELETE button next to each row to allow user to delete the specific row of the table. but my code only removes the first lines of the table on each click I have tried many other suggested ways in this forum but no one works for me. here is the code please help.

I know this code just delete the first lines on each click, please tell me which syntax and commands should i use, will be appreciated if you help me to get it right.

the HTML table


   $query = "SELECT * FROM $table_select";
   $result = mysql_query($query);
   $num = mysql_num_rows($result);
$i=0;
while ($i < $num) {

    $f1=mysql_result($result,$i,"manager_st");
	$f2=mysql_result($result,$i,"freelancer_st");
	$f3=mysql_result($result,$i,"link");
	$f4=mysql_result($result,$i,"photo");
	$f5=mysql_result($result,$i,"unit_price");
	$f6=mysql_result($result,$i,"qty");
	$f7=mysql_result($result,$i,"express");
	$f8=mysql_result($result,$i,"customer_st");
	$f9=mysql_result($result,$i,"additional_link");
    $totao_unit_price = $f5*$f6;
	$row = mysql_result($result,$i,"product_id");
?>

  <tr>
  <td> <button  type="button" onclick="displayResult()">Delete</button></td>
    <td><p><font face="Arial"><input name="row_txtbox" type="text" id="row_txtbox" size="2" value="<?php echo $row; ?>"></font></td>
	<td><p><font face="Arial"> <textarea name="manager_txtbox" cols="10" id="manager_txtbox"><?php echo $f1; ?></textarea></font></td>
	<td><p><font face="Arial">        <textarea name="purchase_txtbox" cols="10" id="purchase_txtbox"><?php echo $f2; ?></textarea>
</font></td>


	<td>
    <font face="Arial"><input name="main_link" type="text" id="main_link" size="2" value="<?php echo $f3; ?>"></font></td>
	<td><font face="Arial"><img src="<?php echo $f4;?>" width="100" align="middle"100></font></td>
	<td><font face="Arial"><input name="unitprice_txtbox" type="text" id="unitprice_txtbox" size="2" value="<?php echo $f5; ?>"></font></td>
	<td><font face="Arial"> <input name="qty_txtbox" type="text" id="qty_txtbox" size="2" value="<?php echo $f6; ?>"></font></td>
	<td><p><font face="Arial"><?php echo $totao_unit_price; ?></font></td>
	<td><p><font face="Arial"><input name="express2" type="text" id="express3" size="2" value="<?php echo $f7; ?>"></font></td>
	<td><p><font face="Arial"> <textarea name="custdesc_txtbox" cols="20" id="custdesc_txtbox"><?php echo $f8; ?></textarea></font></td>
    <td><font face="Arial"><p><font face="Arial"><input name="additional_link" type="text" id="additional_link" size="2" value="<?php echo  $f9; ?>"></font>
    


  <p>
    <?php
$i++;
}
?>
</table>
    
  </p>
  <p>
   
  </p>


</div>
</form>







The Jquery


<script type="text/javascript"> 

function displayResult()
     {
		document.getElementById("neworder_listview").deleteRow() 
		
	 }
</script>





Is This A Good Question/Topic? 0
  • +

Replies To: Delete a dynamically generated html <tr> using jquery

#2 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6039
  • View blog
  • Posts: 23,436
  • Joined: 23-August 08

Re: Delete a dynamically generated html <tr> using jquery

Posted 08 May 2012 - 03:52 AM

Don't post jQuery questions in PHP.

Moved to jQuery,
Was This Post Helpful? 0
  • +
  • -

#3 smaboud  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 119
  • Joined: 22-April 12

Re: Delete a dynamically generated html <tr> using jquery

Posted 08 May 2012 - 03:55 AM

sorry, how to move it?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3489
  • View blog
  • Posts: 10,057
  • Joined: 08-June 10

Re: Delete a dynamically generated html <tr> using jquery

Posted 08 May 2012 - 04:09 AM

first, that’s not jQuery but standard Javascript.

second, .deleteRow() accepts a parameter. if that one is omitted, it uses the default value (first row)
Was This Post Helpful? 0
  • +
  • -

#5 smaboud  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 119
  • Joined: 22-April 12

Re: Delete a dynamically generated html <tr> using jquery

Posted 08 May 2012 - 04:26 AM

yes I understand that it takes index, I thought about creating a variable using PHP and make the row to generate a variable as the row index and so delete the row as follow



  <td> <button  id= " <?php $rowNO ?>"   type="button" onclick="displayResult()">Delete</button></td>








document.getElementById("neworder_listview").deleteRow(' $rowNO ')




something like this but i wasn't successful to find the right syntax for this idea.
Was This Post Helpful? 0
  • +
  • -

#6 mrbll  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 08-May 12

Re: Delete a dynamically generated html <tr> using jquery

Posted 08 May 2012 - 10:08 AM

You should be able to call the table and the child row then use a .remove. I would give the table row a id personally and then call remove on that.

For example

$("idTr").remove();


Was This Post Helpful? 0
  • +
  • -

#7 smaboud  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 119
  • Joined: 22-April 12

Re: Delete a dynamically generated html <tr> using jquery

Posted 08 May 2012 - 08:11 PM

View Postmrbll, on 08 May 2012 - 10:08 AM, said:

This code will only remove one row, as I said my rows are dynamic, so they should have a dynamic name, is there any way to give them a dynamic ID?

<!-- I dont think this syntax will work --->
<tr id= "<? $dynamicVAR ?> " ></tr>





and then remove it as follow?
$("dynamicVAR").remove();


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1