时间戳

首页 > 解决方案 > 使用 js 添加新行，但新行具有来自第一行的输入值。如何将输入值更改为空白？

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

问题描述

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

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

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

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

标签： javascript

解决方案

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>

将返回：

"&lt;tr&gt;
    &lt;td&gt;Bill&lt;/td&gt;
    &lt;td&gt;Smith&lt;/td&gt;
    &lt;td&gt;23&lt;/td&gt;
  &lt;/tr&gt;"

然后在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变量中指定。

推荐阅读