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

Javascript 使用js添加新行,但新行具有来自第一行的输入值。如何将输入值更改为空白?,javascript,Javascript,我创建了一个表,用户可以在单击“添加”按钮时添加额外的行。它工作得很好,但是它正在复制第一行值,我希望新行输入值为空。因此,用户可以从空行开始 下面是我正在使用的代码 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ <?php $tabindex = 10; $count =1; for($x = 0; $x < $arrlength; $x++

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

下面是我正在使用的代码

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

     <?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>


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>
然后在
me.addRow
函数中插入
row1
,该函数包含您在
var row1=table.rows[1]中指定的内容

例如,如果只想插入一个空行,可以执行以下操作:

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

这样,变量
row1
将包含一个带有空单元格的
HTML元素。单元格的数量在
变量中指定。

如果我理解了代码,则行1看起来是现有行的副本,然后使用行1将其插入单击的行之后。是的,正确,我希望在创建新行时保持第二行的完整性。我可以在js中硬编码,但我想知道是否有更简单的方法在添加新行之前清除值内容或行1。我已经用代码更新了答案,添加了一行空单元格
  let row1 = document.createElement('tr');
  let columns = 3;
  for(let i = 0; i < columns; i++) {
    let cell = document.createElement('td');
    row1.appendChild(cell);
  }