Add new row (special case) with jQuery?

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. I used this code for insertion:

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'>";   
}

and this the table:

<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><开发者_Go百科;?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>

How I can do this with jQuery? I need also 3rd cell to be current time and 4th cells to be current date auto generated? Any help will be appreciated...

Remove the onClick attribute and add the following code to your page:

(function() {
  $('td img').live('click', function() {
     d = new Date();
     date = d.getMonth() + '/' + d.getDay() + '/' + d.getFullYear();
     time = d.getHours() + ':' + d.getMinutes();
     $(this).closest('tr').after(
       $('<tr>').append(
         $('<td>').html($('<input>').attr({'type': 'input', 'name': 't1'})))
         .append($('<td>').html($('<input>').attr({'type': 'input', 'name': 't2'})))
         .append($('<td>').html($('<input>').attr({'type': 'input', 'name': 't3'}).val(date)))
         .append($('<td>').html($('<input>').attr({'type': 'input', 'name': 't4'}).val(time))));

     );
  }
})();

Try this:

function addRow(elem)
{
   $(elem).closest('tr').append('[html for new tr]');
}

Modify img tag like this:

<img onClick="addRow(this)"... >

In jQuery, it would look something like this:

$(function() {
    $("td img").live('click',function() {
        var row = $("<tr></tr>").html("<td>test</td><td></td><td></td>");
        $("#tblGrid").append(row);
    });
});

jsfiddle: http://jsfiddle.net/jasonmiesionczek/p44Kr/

<img class="addRow" width="20px" height="20px" src="images/add_32.png"/>

place this html after the table and table have the class "rowContainer".

Add the following jQuery to script tag.

$(document).ready(function(){
      var newRow="<tr><td><input type='text' name='t1'></td>"; 
      newRow+= "<td><input type='text' name='t2'></td>";
      newRow+= "<td><input type='text' name='t3'></td>";
      newRow+= "<td><input type='text' name='t4'></td></tr>";
      $('.addRow').click(function(){
            $('.rowContainer').append(newRow);
      });
});