JavaScript，创建新的 html 元素 : the content of the new created is inserted in old

Question

我正在创建一个包含 JavaScript 代码的网页，我想做的是每当我单击一个按钮时，代码都会创建一个新的 <tr>在每个<tr>会有很多<td>元素。但问题是，每当我点击按钮时，都会创建元素，但每个元素的内容 <td>插入到第一行的单元格中 <tr> .这意味着全新 <td> s 是空的。

举个例子:如果我点击“Ajouter une ligne”按钮两次，看起来会创建 2 行:

但是如果我们看一下 html 代码，我们可以看到第二个 <tr>是空的:

这是代码.js

<script>
///////////////
var click=0;
function addform() {
click +=1;
var element = document.getElementById("div1");
//create a tr
var id_tr="tr"+click;
create_tr(element, id_tr);

//create the content of td
 


var designation = document.createElement("INPUT");
textinput(designation, "text" , "designation", "form-control", 
"Désignation",click);

var datef = document.createElement("INPUT");
textinput(datef, "date" , "datefacture", "form-control", "Date de 
Facture",click);

var datep = document.createElement("INPUT");
textinput(datep, "date" , "datepaie", "form-control", "Date de Paie",click);

var mht = document.createElement("INPUT");
textinput(mht, "text" , "mht", "form-control", "Montant HT",click);

var mtva = document.createElement("INPUT");
textinput(mtva, "text" , "mtva", "form-control", "Montant TVA",click);

var mttc = document.createElement("INPUT");
textinput(mttc, "text" , "mttc", "form-control", "Montant TTC",click);

var file = document.createElement("INPUT");
textinput(file, "text" , "file", "form-control", "Choose File",click);

var importer = document.createElement("INPUT");
textinput(importer, "button" , "importer", "btn btn-primary", "Choose 
File",click);


var elmtr=document.getElementById(id_tr);
create_tds(elmtr, designation, 1 );
create_tds(elmtr, datef, 2 );
create_tds(elmtr, datep, 3);
create_tds(elmtr, mht, 4);
create_tds(elmtr, mtva, 5);
create_tds(elmtr, mttc, 6);
create_tds(elmtr, file, 7);
create_tds(elmtr, importer, 8);
}
function create_tr(element, id_tr){
var trr = document.createElement("TR");
trr.setAttribute("id", id_tr);
element.appendChild(trr);

}
function create_tds(elmtr,input_td, clicktd){
var y = document.createElement("TD");
var td="td";
y.setAttribute("id", td+clicktd);
elmtr.appendChild(y);
var elmtd=document.getElementById(td+clicktd);
elmtd.appendChild(input_td);

}
function textinput(x, type, name, classe, placeholder,click){

x.setAttribute("type", type);
x.setAttribute("name", name+click);
x.setAttribute("class", classe);
x.setAttribute("placeholder", placeholder);
if (name=="file") {

    x.setAttribute("disabled", "disabled");
}
if (type == "button") {
x.setAttribute("value", "importer");    
}
}
</script>

Answer 1

根据您的屏幕截图，您犯了一个基本错误:id 是一种可以清楚地识别页面中每个元素的工具。意味着 id 必须是唯一的。表格单元格的 ID 出现不止一次。

如果您有机会使用 Jquery，您可以将 id 更改为 -dummy- css 类。多次使用 css 类的名称是有效的 html 代码。 :-)