Table 单击后的单元格在下方添加行

Question

我有一个 table 这样的：

                <div class="table-wrapper">
                    <table id="HK_myTable">
                    <tr>
                        <th style="width:0.5%"></th>
                        <th style="width:2%">STORE</th>
                        <th style="width:10%">SECTION</th>
                        <th style="width:30%">ELEMENT</th>
                        <th style="width:48.5%">ACTION</th>
                    </tr>
                    <tr>
                    <td><a class="icon fa fa-trash" onclick="is_done($(this))"></a></td>
                    <td>2227</td>
                    <td>BATHROOM</td>
                    <td>CABIN GLAS</td>
                    <td>NEED REPARATION</td>
                    </tr>
                    <tr>
                    </table>
                </div>

我希望当我单击每行的第一个单元格时，我会在单击的单元格下方创建一个新行。这是我的 JS 代码：

                    function is_done(row)
                        {
                        var currentdate = new Date(); 
                        var tm = currentdate.getDate() + "/"
                                    + (currentdate.getMonth()+1)  + "/" 
                                    + currentdate.getFullYear() + " "  
                                    + currentdate.getHours() + ":"  
                                    + currentdate.getMinutes();                 
                        row.closest('td').html('Maintenance');  //This works                    
                        row.closest('tr').append('<tr><td>checked on'+tm+'<td></tr>');  //Here is the problem.. no row is added under the clicked <td>                          
                        }

Answer 1

你必须切换2行代码：

发件人：

row.closest('td').html('Maintenance');
row.closest('tr').after('<tr><td>checked on' + tm + '<td></tr>');

收件人：

row.closest('tr').after('<tr><td>checked on' + tm + '<td></tr>');
row.closest('td').html('Maintenance');

当您运行 row.closest('td').html('Maintenance'); 更改 html 和 row

的对象时

请注意：您在 <tr></table> 末尾有一个未关闭的 <td>，还有用户 .after() 而不是 .append()

演示

function is_done(row) {
  var currentdate = new Date();
  var tm = currentdate.getDate() + "/" +
    (currentdate.getMonth() + 1) + "/" +
    currentdate.getFullYear() + " " +
    currentdate.getHours() + ":" +
    currentdate.getMinutes();
  row.closest('tr').after('<tr><td>checked on' + tm + '<td></tr>');
  row.closest('td').html('Maintenance');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-wrapper">
  <table id="HK_myTable">
    <tr>
      <th style="width:0.5%"></th>
      <th style="width:2%">STORE</th>
      <th style="width:10%">SECTION</th>
      <th style="width:30%">ELEMENT</th>
      <th style="width:48.5%">ACTION</th>
    </tr>
    <tr>
      <td>
        <a class="icon fa fa-trash" onclick="is_done($(this))">click</a>
      </td>
      <td>2227</td>
      <td>BATHROOM</td>
      <td>CABIN GLAS</td>
      <td>NEED REPARATION</td>
    </tr>
  </table>
</div>

Table 单击后的单元格在下方添加行

Table cell on click add row just under

jquery

html-table

append

closest