克隆期间更改表中的按钮值

Question

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

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

我已成功克隆了行但我想将克隆行的按钮值从“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>";
      } 
?>  

如何将克隆行的按钮值从“ADD”更改为“REMOVE”？

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>