单击添加行的表格单元格就在下方

Question

我有一张这样的桌子：

                <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

你要切换两行代码：

发件人：

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 的对象

请注意：你有一个未关闭的<td><tr></table>，还有用户.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>