Question

我创建了一个包含行的表，并且在每行的最后一个'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'>";   
}

这个表：

<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做到这一点？我还需要第3个单元格是当前时间，第4个单元格是自动生成的当前日期吗？任何帮助将不胜感激......

Answer 1

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

$(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/

Answer 2

试试这个：

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

像这样修改img标签：

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

Answer 3

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

     );
  }
})();

Answer 4

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

将这个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);
      });
});

用jQuery添加新行（特例）？

4 个答案: