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);
      });
});