使用table标记代替div

Question

我用javascript编写了一个json代码。但它使用div标签(类：demir(。我想使用表标记(类：demirlist(我的代码的哪一部分必须更改？如果你能帮助我，我将不胜感激。此外，可以绘制的命令如下所示。

代码：

function rmvdemir(a) {
demir=$("input[name=demirjson]").data("demir");
demir[a]["sil"]=1;
console.log("aaaa");
$("input[name=demirjson]").data("demir",demir);
$("input[name=demirjson]").val(JSON.stringify(demir));
drawTable(demir);
}
function editLoad() {
if ($("#isedit").data("edit")) {
demir=$.parseJSON($("input[name=demirjson]").val());
$("input[name=demirjson]").data("demir",demir);
$("input[name=demirjson]").val(JSON.stringify(demir));
drawTable(demir);
}
}
$("#demircapekle").on("click",function functionName() {
demir=$("input[name=demirjson]").data("demir");
if (typeof(demir)!='object') {
demir={};
}
id=$("#id").val();
cap=$("#cap").val();
adet=$("#adet").val();
boy=$("#boy").val();
console.log(cap);
console.log(adet);
console.log(boy);
if (cap>0) {
$("#demirlist").html();
abc={id:id,cap:cap,adet:adet,boy:boy,sil:0};
demir[id+"-"+cap]=(abc);
$("input[name=demirjson]").data("demir",demir);
$("input[name=demirjson]").val(JSON.stringify(demir));
drawTable(demir);
$("#id").val("");
$("#cap").val("");
$("#adet").val("");
$("#boy").val("");
}

drawTable:

function drawTable(demir) {
$("#demirlist").html("<tr><td>Demir Çapı</td><td>Adet</td><td>Boy</td><td>Sil</td></tr>");
console.log(demir);
for (var a in demir) {
if (demir[a]["sil"]==0) {
if (demir[a]["id"]>0) {
$(".demir").append("<tr><td>"+demir[a]["cap"]+"</td><td>"+demir[a]["adet"]+"</td><td>"+demir[a]["boy"]+"</td><td><a class='btn btn-warning btn-xs il' target='_blank'>Düzenle</a>  <button class='btn btn-danger btn-xs il' onclick=rmvdemir('"+a+"')>Sil</button></td></tr>");
}else{
$(".demir").append("<tr><td>"+demir[a]["cap"]+"</td><td>"+demir[a]["adet"]+"</td><td>"+demir[a]["boy"]+"</td><td> <button class='btn btn-danger btn-xs il' onclick=rmvdemir('"+a+"')>Sil</button></td></tr>");
}
}
}
}

Answer 1

问题出在drawTable函数中：

function drawTable(demir) {
// here, the code sets the HTML of the element with the id "demirlist" to a table row.
$("#demirlist").html("<tr><td>Demir Çapı</td><td>Adet</td><td>Boy</td><td>Sil</td></tr>");
console.log(demir);
for (var a in demir) {
if (demir[a]["sil"] == 0) {
if (demir[a]["id"] > 0) {
// here, the code appends a table row to an element with the class "demir"
$(".demir").append("<tr><td>" + demir[a]["cap"] + "</td><td>" + demir[a]["adet"] + "</td><td>" + demir[a]["boy"] + "</td><td><a class='btn btn-warning btn-xs il' target='_blank'>Düzenle</a>  <button class='btn btn-danger btn-xs il' onclick=rmvdemir('" + a + "')>Sil</button></td></tr>");
} else {
// here, the code appends a table row to an element with the class "demir"
$(".demir").append("<tr><td>" + demir[a]["cap"] + "</td><td>" + demir[a]["adet"] + "</td><td>" + demir[a]["boy"] + "</td><td> <button class='btn btn-danger btn-xs il' onclick=rmvdemir('" + a + "')>Sil</button></td></tr>");
}
}
}
}

您首先设置id为"的元素的HTML；demerlist"；到表格行。然后，在循环中，将表行附加到一个类为"的元素；demir"；，其可以是或可以不是相同的元件。为了确保它们都被附加到同一个元素，只需在所有情况下使用相同的选择器：

function drawTable(demir) {
// here, the code sets the HTML of the element with the id "demirlist" to a table row.
$("#demirlist").html("<tr><td>Demir Çapı</td><td>Adet</td><td>Boy</td><td>Sil</td></tr>");
console.log(demir);
for (var a in demir) {
if (demir[a]["sil"] == 0) {
if (demir[a]["id"] > 0) {
// Changed this to the same selector as the one that got the first row
$("#demirlist").append("<tr><td>" + demir[a]["cap"] + "</td><td>" + demir[a]["adet"] + "</td><td>" + demir[a]["boy"] + "</td><td><a class='btn btn-warning btn-xs il' target='_blank'>Düzenle</a>  <button class='btn btn-danger btn-xs il' onclick=rmvdemir('" + a + "')>Sil</button></td></tr>");
} else {
// Changed this to the same selector as the one that got the first row
$("#demirlist").append("<tr><td>" + demir[a]["cap"] + "</td><td>" + demir[a]["adet"] + "</td><td>" + demir[a]["boy"] + "</td><td> <button class='btn btn-danger btn-xs il' onclick=rmvdemir('" + a + "')>Sil</button></td></tr>");
}
}
}
}