表格单元格，单击"添加行"

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

请注意：您在<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>