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);
}