我想獲得類似的結(jié)果，如下圖所示。預期結(jié)果：問題：尋找 Jquery 或 javascript 解決方案來創(chuàng)建動態(tài)表以及 Rowspan。我在獲取父行并添加行跨度時遇到問題。非常感謝您的幫助。這是我的 JSON 格式和我想要實現(xiàn)的目標：var data={"result": [ { "RMP_MASTER_WILAYAH_ID": "20190402080337958516", "RMP_MASTER_WILAYAH_KODE": "02", "RMP_MASTER_WILAYAH_detail": [ { "RMP_MASTER_WILAYAH_ID": "20190402080403561417", "RMP_MASTER_WILAYAH": "KUALA ENOK", "RMP_MASTER_WILAYAH_relasi": [ { "RMP_MASTER_PERSONAL_ID": "20190329144213331884", "RMP_MASTER_PERSONAL_NAMA": "YANTO KHO", }, { "RMP_MASTER_PERSONAL_ID": "20190329144712243937", "RMP_MASTER_PERSONAL_NAMA": "USMAN", } ] }, { "RMP_MASTER_WILAYAH_ID": "20190402080355461744", "RMP_MASTER_WILAYAH": "ENOK", "RMP_MASTER_WILAYAH_relasi": [ { "RMP_MASTER_PERSONAL_ID": "20190329150712446114", "RMP_MASTER_PERSONAL_NAMA": "NURDIN", }, { "RMP_MASTER_PERSONAL_ID": "20190329151404711228", "RMP_MASTER_PERSONAL_NAMA": "H. HARUNA RASYID", } ] }, { "RMP_MASTER_WILAYAH_ID": "20190402080411413459", "RMP_MASTER_WILAYAH": "PARIT PINANG", "RMP_MASTER_WILAYAH_relasi": [ { "RMP_MASTER_PERSONAL_ID": "20190329153052471217", "RMP_MASTER_PERSONAL_NAMA": "SUWANDI", }, { "RMP_MASTER_PERSONAL_ID": "20190329153610274231", "RMP_MASTER_PERSONAL_NAMA": "BEDDU", } ] } ]
2 回答
翻閱古今
TA貢獻1780條經(jīng)驗 獲得超5個贊
我試過解決你的問題。下面是 createRowHTML 函數(shù)的變化。
function createRowHTML() {
var tableContent = "";
for (var result = 0; result < data.result.length; result++) {
// calculate rowspan for first cell
var rowspan = 0;
var detailLength = data.result[result].RMP_MASTER_WILAYAH_detail.length;
rowspan += detailLength;
for (var i = 0; i < detailLength; i++) {
rowspan += data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi.length;
}
// create rows
tableContent += "<tr><td rowspan=" + parseInt(1 + rowspan) + ">" + data.result[result].RMP_MASTER_WILAYAH_KODE + "</td></tr>";
var relasiLength = 0;
for (var i = 0; i < detailLength; i++) {
relasiLength = data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi.length;
tableContent += "<tr><td rowspan=" + parseInt(1 + relasiLength) + ">"
+ data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH + "</td></tr>";
for (var j = 0; j < relasiLength; j++) {
tableContent += "<tr><td>" + data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi[j].RMP_MASTER_PERSONAL_NAMA + "</td></tr>";
}
}
}
$("tbody#zone_data").append(tableContent);
}
$(function () {
createRowHTML();
});
工作示例： http: //jsfiddle.net/w8r2a9vs/
慕娘9325324
TA貢獻1783條經(jīng)驗 獲得超4個贊
您可以使用二叉樹的邏輯。對于您來說，問題可以跟蹤所有沒有子節(jié)點的節(jié)點，在頂部父節(jié)點上，將 +1 添加到 rowspan 到任何父節(jié)點
在沒有孩子的示例節(jié)點中
{
"RMP_MASTER_PERSONAL_ID": "20200325091038411761",
"RMP_MASTER_PERSONAL_NAMA": "M. TANG",
}第一個父母收到 2 行跨度“點”，下一個父母有他的孩子的行跨度總和
算法：
1 遍歷所有節(jié)點，
2 如果找到?jīng)]有子節(jié)點的節(jié)點遍歷他的所有父節(jié)點并向“rowspan”添加+1
- 2 回答
- 0 關(guān)注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消