Question

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><?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…

Answer 1

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

     );
  }
})();