[英]JS Append Row in HTML Table
我有一個帶有一些值的隱藏字段,我必須將這些值附加到HTML表中。表中的列數是固定的。 我已經成功添加了,但是在第一行之后,它應該將數據添加到新行中,而不是在同一行中添加。 我就是這樣
$("#btntbl").click(function () {
debugger
var tabl = $("#testTable");
var vals = $("#txthidden").val();
for (var i = 0; i < vals.split(";").length; i++) {
for (var j = 0; j < vals.split(";")[i].split(",").length; j++) {
tabl.append("<td>" + vals.split(";")[i].split(",")[j] + "</td>");
}
}
});
還要注意,有些用戶沒有禁用列JS Fiddle的值。每次單擊按鈕時,如何添加新行?
您需要拆分兩次並為每行創建tr
:
$("#btntbl").click(function () { var tabl = $("#testTable"), vals = $("#txthidden").val(), rows = vals.split(';'), columns, i; for (i = 0; i < rows.length; i++) { columns = rows[i].split(','); tabl.append( '<tr>' + '<td>' + columns[0] + '</td>' + '<td>' + columns[1] + '</td>' + '<td>' + (columns[2] || '') + '</td>' + '</tr>' ); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" id="btntbl" value="Export to table"> <input type="hidden" value="User1,pwd1;User2,pwd2,disabled;User3,pwd3,disabled;User4,pwd4" id="txthidden" /> <table id="testTable" border="2"> <thead valign="top"> <tr> <th>User</th> <th>Password</th> <th>Disabled</th> </tr> </thead> </table>
只需添加一行即可更改目標
更改
var tabl = $("#testTable");
至
var tabl = $('<tr>');
$("#testTable").append( tab1);
$("#btntbl").click(function () {
var parts = $("#txthidden").val().split(";"), i=0;
for (;i<parts.length;) {
var j=0, tr="<tr>", subParts=parts[i++].split(",");
for (;j<3;) tr += "<td>" + (subParts[j++]||"") +"</td>"; // concatenate
$("#testTable").append( tr +"</tr>" ); // Append once
}
});
這是你怎么做
var convertToTable = function (val) {
val = val.split(';');
val = val.map(function (v) {
v = v.split(',');
if (v.length === 2) v[v.length] = 'NA';
return '<td>' + v.join('</td><td>') + '</td>';
});
val = '<tr>' + val.join('</tr><tr>') + '</tr>';
return val;
}
接着
tabl.html(convertToTable(vals));
在這里演示
您忘記了TD標簽,只需在TD之前使用open標簽,最后將其關閉
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.