Member Avatar for 7kemZmani

I create a table that contain rows and on last 'td' on each row there is an 'img' to insert new row onClick="addRow()". I want this new row to insert below clicked row. Clearly, if i have row X and row Y and i click on the 'img' on X row then i will get the new row below X and above Y.
am using this code for insertion:

<script>
function addRow()
   {

    var newRow = document.all("tblGrid").insertRow(-1);

    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t1'>";
    
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t2'>";
    
    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t3'>";
	
	oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t4'>";   
   }
</script>

<table id="tblGrid" cellspacing="0">
        <tr>
          
          <th>Instraction</th>
          <th>Result</th>
          <th>Time</th>
          <th>Date</th>
          <th>Add</th>
        </tr>
        <?php do { ?>
          <tr>
            <td><?php echo $row_instRecordset['instName']; ?></td>
            <td><?php echo $row_instRecordset['instValue']; ?></td>
            <td><?php echo $row_instRecordset['instTime']; ?></td>
            <td><?php echo $row_instRecordset['instDate']; ?></td>
            <td><img onClick="addRow()" width="20px" height="20px" src="images/add_32.png"/></td>
          </tr>
          <?php } while ($row_instRecordset = mysql_fetch_assoc($instRecordset)); ?>
      </table>
  • 2 Contributors
  • 6 Replies
  • 279 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Airshow

Recommended Answers

All 6 Replies

Member Avatar for 7kemZmani

any help please .....

Member Avatar for Airshow

Adding table rows comes up with great regularity in this forum.

My recommended approach is to hard code a prototype row in HTML, then insert a clone of it in response to whatever user event. The cloned row can be modified to give it the necessary content as required.

I have provided several worked up solutions in the past. This was the most recent.

One day, when I find time, I will post a Code Snippet on the subject. It will almost certainly use jQuery, which makes life significantly simpler especially if the cloned rows are to have events (onclick, onkeyup etc) - this is (typically) trivial in jQuery because events can be cloned from the prototype automatically.

Airshow

Member Avatar for 7kemZmani

Thank you Airshow, am trying now to use jQury to solve this trick if you know how can i make it with jQury please tell me because i spend a lot of time with this.

Member Avatar for Airshow

7kem,

This is a demo based on your html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
	var $prototypeRow = $("#prototype").find("tr").eq(0);
	$(".addRow").click(function(){
		$prototypeRow.clone(true).insertAfter($(this).closest("tr"));
		return false;
	});
	$(".removeRow").click(function(){
		if( confirm('Remove row?') ){
			$(this).closest("tr").remove();
		}
		return false;
	});
});
</script>
</head>

<body>

<table id="prototype" style="display:none;">
<tr>
<td><input type='text' name='t1'></td>
<td><input type='text' name='t2'></td>
<td><input type='text' name='t3'></td>
<td><input type='text' name='t4'></td>
<td>
	<a href="#" class="addRow"><img width="20px" height="20px" src="images/add_32.png" title="add" /></a>
	<a href="#" class="removeRow"><img width="20px" height="20px" src="images/add_32.png" title="remove" /></a>
</td>
</tr>
</table>

<table id="tblGrid" cellspacing="0" border>
<tr>
<th>Instraction</th>
<th>Result</th>
<th>Time</th>
<th>Date</th>
<th>Add/Remove</th>
</tr>
<tr>
<td>instName</td>
<td>instValue</td>
<td>instTime</td>
<td>instDate</td>
<td><a href="#" class="addRow"><img width="20px" height="20px" src="images/add_32.png" /></a></td>
</tr>
</table>

</body>
</html>

As you will see, I have included "remove" buttons as well as "add" buttons.

In my version, new rows insert after the clicked row. It's very easy to change the code to insert new rows at the end of the table (as in your code) but then you would need only one "add" button for the whole table - not one per row. Most things are possible.

Airshow

Edited by Airshow because: n/a
Member Avatar for 7kemZmani

WOOHOOO Thank you very much Airshow it works Great :)

Member Avatar for Airshow

:cool:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.