javascript - 使用 js 添加新行但新行具有来自第一行的输入值。如何将输入值更改为空白？

Question

我创建了一个表，用户可以在单击“添加”按钮时在其中添加其他行。它工作得很好，但是它正在复制第一行值，我希望新行输入值为空。因此用户可以从空白行开始。

下面是我正在使用的代码。

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

     <?php $tabindex = 10;

        $count  =1;
        for($x = 0; $x < $arrlength; $x++) {
        ?>
        <tr>
                
                <td class="" id="tbl_id"><input id="make" type="text" name="make[]" autofocus placeholder="Make" tabindex="<?php echo $tabindex + 2; ?>" value = "<?php echo $_POST['make'][$x]; ?>" /></td>
             
            <td class=""><button class="btn btn-primary m-1" tabindex = "<?php echo $tabindex + 8; ?>" type="button" title = "Insert Row" value="Add Row" onclick="ob_adRows.addRow(this)">+</button></td
        </tr>
        <?php 
        $count += 1;    
        $tabindex = $count * 10;
        } ?>

<script>
function adRowsTable(id){
  var table = document.getElementById(id);
  var me = this;
  if(document.getElementById(id)){
    var row1 = table.rows[1].outerHTML;
      
      function tabindex_add(){
           var tabindex = 1;
          $('input,select').each(function() {
            if (this.type != "hidden") {
            var $input = $(this);
            $input.attr("tabindex", tabindex);
            tabindex++;
            }
        });
      }
          
      
    //adds index-id in cols with class .tbl_id
    function setIds(){
      var tbl_id = document.querySelectorAll('#'+ id +' .tbl_id');
     var input_model = document.querySelectorAll('#'+ id +' .model');
      for(var i=0; i<tbl_id.length; i++) 
      {
          tbl_id[i].innerHTML = i+1;
          //input_model[i].value = "MADE IT";
          
      }
                
    }

    //add row after clicked row; receives clicked button in row
    me.addRow = function(btn){
      btn ? btn.parentNode.parentNode.insertAdjacentHTML('afterend', row1): 
       table.insertAdjacentHTML('beforeend',row1);
      setIds();
     tabindex_add();
    }

    //delete clicked row; receives clicked button in row
    me.delRow = function(btn){
      btn.parentNode.parentNode.outerHTML ='';
      setIds();
    }
  }
}

//create object of adRowsTable(), pass the table id
var ob_adRows = new adRowsTable('table1');
</script>

Answer 1

Yuu 正在设置变量 row1这样:var row1 = table.rows[1].outerHTML;通过使用 outerHTML属性并将其返回值分配给 row1 ，您正在制作表中第二行的副本。例如:

 <table id="table" style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Smith</td>
    <td>23</td>
  </tr>
</table>
<script>
  console.log(document.getElementById("table").rows[1].outerHTML)
</script>

将返回:

"<tr>
    <td>Bill</td>
    <td>Smith</td>
    <td>23</td>
  </tr>"

在me.addRow然后插入的函数 row1 ，其中包含您在 var row1 = table.rows[1].outerHTML; 中分配的内容.

如果你只想插入一个空行，你可以这样做:

  let row1 = document.createElement('tr');
  let columns = 3;
  for(let i = 0; i < columns; i++) {
    let cell = document.createElement('td');
    row1.appendChild(cell);
  }

这条路变量row1将包含 <tr>带有空单元格的 HTML 元素。单元格数在 columns 中指定。变量。