在克隆中更改表格中的按钮值

Question

我有一个带有表格的模式（下图）。

当我点击添加按钮时，它会将整行克隆到模态后面的表格中（下图）。

我已成功克隆行，但我想将克隆行的按钮值从“ADD”更改为“REMOVE”。我该怎么做？下面

代码是如何克隆行

<script> 
     function addField(n) 
     { 
      var tr = n.parentNode.parentNode.cloneNode(true); 
      document.getElementById('tbl').appendChild(tr); 
     } 
</script> 

这是我的表

<?php 

    while($datatrack = mysqli_fetch_assoc($resultTrack)) 
    { 
     echo " 
     <tr> 
     <td>".$datatrack['Question_ID']."</td> 
     <td>".$datatrack['Question']."</td> 
     <td>".$datatrack['Track_Desc']."</td> 
     <td><input type='button' onclick='addField(this)' value='ADD'></td> 
     </tr>"; 
     } 
?> 

如何改变克隆行的按钮值从“添加”到“删除”？

Answer 1

你可以简单地查询在tr变量按钮元素，然后将其值设置：

<script> 
    function addField(n) 
    { 
     var tr = n.parentNode.parentNode.cloneNode(true); 
     var buttonInput = tr.querySelector('[value="ADD"]'); 

     if (buttonInput) { 
      buttonInput.value = 'REMOVE'; 
     } 

     document.getElementById('tbl').appendChild(tr); 
    } 
</script>