Javascript 克隆没有以前输入的文本的HTML行
我有以下HTML和JAVASCRIPT代码。现在,我可以动态添加行,但它也会克隆已经输入的数据。文本字段为空时如何克隆它?任何建议都将不胜感激 HTML:Javascript 克隆没有以前输入的文本的HTML行,javascript,html,html-table,Javascript,Html,Html Table,我有以下HTML和JAVASCRIPT代码。现在,我可以动态添加行,但它也会克隆已经输入的数据。文本字段为空时如何克隆它?任何建议都将不胜感激 HTML: 您可以使用querySelectorAll获取所有文本类型的输入,然后遍历它们并编辑值: 函数deleteRow(行) { var i=row.parentNode.parentNode; i、 parentNode.removeChild(i); } 函数insRow() { console.log('hi'); var x=docume
您可以使用
querySelectorAll
获取所有文本类型的输入,然后遍历它们并编辑值:
函数deleteRow(行)
{
var i=row.parentNode.parentNode;
i、 parentNode.removeChild(i);
}
函数insRow()
{
console.log('hi');
var x=document.getElementById('tables');
var new_row=x.rows[1]。克隆节点(true);
var len=x.rows.length;
新的行。单元格[0]。innerHTML=len;
var inp1=new_row.cells[1]。getElementsByTagName('input')[0];
inp1.id+=len;
inp1.value='';
var inp2=new_row.cells[2].getElementsByTagName('input')[0];
inp2.id+=len;
inp2.value='';
var inputs=new_row.querySelectorAll('input[type=text]”);
对于(var i=0;i你可以试试这个
函数deleteRow(行)
{
var i=row.parentNode.parentNode;
i、 parentNode.removeChild(i);
}
函数insRow()
{
var x=document.getElementById('tables');
var new_row=x.rows[1]。克隆节点(true);
var len=x.rows.length;
新的行。单元格[0]。innerHTML=len;
var inp1=new_row.cells[1]。getElementsByTagName('input')[0];
inp1.id+=len;
var inp2=new_row.cells[2].getElementsByTagName('input')[0];
inp2.id+=len;
Array.prototype.slice.call(
new_row.querySelectorAll('input[type=text]'))
.forEach(功能(el){
el.值='';
});
x、 追加子项(新的_行)
}
400P
层
最低购买量
倍增器
计量单位
复古的
放心
支付
删除?
添加行
1.
不完全相关,但是当您第一次删除行时,新ID的计数器不工作从表中,然后添加新行。在外部范围中声明计数器,并在每次使用时递增。您的代码不是已经创建了空白输入吗?不过,您可以在循环中创建空白输入。如果您在第二行、第三行等中输入数据,它将创建空输入。但是,如果您在第一行中添加数据并点击“添加行”然后数据将被复制到以下行。请稍等,我将创建一个小提琴…完美的作品伟大!!
<div align="center" id="border">
<p>
<div id="rebate_400p">
<strong>400P</strong><br>
</div>
<table id="tables" cellspacing="5">
<tr align="center" id="table_titles">
<td>Tier</td>
<td>Purchase Minimum</td>
<td>Multiplier</td>
<td>UOM</td>
<td>Retro</td>
<td>Guaranteed</td>
<td>Paid</td>
<td>Delete?</td>
<td>Add Row</td>
</tr>
<tr>
<td align="center" name="tier">1</td>
<td><input type="text" id="rebate_tables" name="purchase_minimum"></td>
<td><input type="text" id="rebate_tables" name="multiplier"></td>
<td><input type="text" id="rebate_tables" name="uom"></td>
<td><input type="text" id="rebate_tables" name="retro"></td>
<td><input type="text" id="rebate_tables" name="guaranteed"></td>
<td><input type="text" id="rebate_tables" name="paid"></td>
<td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)"></td>
<td><input type="button" id="addmoreRowsbutton" value="Add row" onclick="insRow()"></td>
</tr>
</table>
</p>
function deleteRow(row)
{
var i=row.parentNode.parentNode;
i.parentNode.removeChild(i);
}
function insRow()
{
console.log( 'hi');
var x=document.getElementById('tables');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
x.appendChild(new_row)
}