0

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
7
Views
6 Years
Discussion Span
Last Post by Airshow
0

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

0

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.

0

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: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.