使用jQuery添加新行（特殊情况）？

我创建了一个包含行的表，在每行的最后一个“td”上都有一个“img”来插入新行

onClick=“addRow（）”

。我想在单击的行下方插入新行。显然，如果我有X行和Y行，我点击X行上的“img”，那么我将得到X下方和Y上方的新行。 我使用此代码进行插入：

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

函数addRow（）
{
var newRow=document.all（“tblGrid”）.insertRow（-1）；
var oCell=newRow.insertCell（）；
oCell.innerHTML=“”；
oCell=newRow.insertCell（）；
oCell.innerHTML=“”；
oCell=newRow.insertCell（）；
oCell.innerHTML=“”；
oCell=newRow.insertCell（）；
oCell.innerHTML=“”；
}

这张表是：

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

指令
结果
时间
日期
添加

如何使用jQuery实现这一点？我还需要第三个单元格是当前时间，第四个单元格是自动生成的当前日期？

---

任何帮助都将不胜感激……

在jQuery中，它看起来像这样：

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

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

$（函数（）{
$（“td img”）.live（'单击'，函数（）{
var行=$（“”）.html（“测试”）；
$（“#tblGrid”）。追加（行）；
});
});

jsiddle:

试试这个：

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

修改img标记，如下所示：

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

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

---

删除onClick属性并将以下代码添加到页面中：

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

     );
  }
})();

（函数（）{
$（'td img'）.live（'click'，function（）{
d=新日期（）；
日期=d.getMonth（）+'/'+d.getDay（）+'/'+d.getFullYear（）；
时间=d.getHours（）+'：'+d.getMinutes（）；
$（this）.最近（'tr'）。之后(
$（''）。追加(
$（''）.html（$（''）.attr（{'type'：'input'，'name'：'t1'}）））
.append（$（''）.html（$（''）.attr（{'type'：'input'，'name'：'t2'}）））
.append（$（''）.html（$（''）.attr（{'type'：'input'，'name'：'t3'}）.val（date）））
.append（$（''）.html（$（''）.attr（{'type'：'input'，'name'：'t4'}）.val（time））；
);
}
})();

将此html放在表格之后，表格具有类“rowContainer”

将以下jQuery添加到脚本标记

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

$（文档）.ready（函数（）{
var newRow=“”；
newRow+=“”；
newRow+=“”；
newRow+=“”；
$（'.addRow'）。单击（函数（）{
$（'.rowContainer'）.append（newRow）；
});
});

谢谢您，酋长先生，但这将在表的末尾插入行。谢谢您，Jason，但这将在表的末尾插入行。谢谢您，Kaisar，但这将在表的末尾插入行。