我想獲得類似的結果，如下圖所示。預期結果：問題：尋找 Jquery 或 javascript 解決方案來創建動態表以及 Rowspan。我在獲取父行并添加行跨度時遇到問題。非常感謝您的幫助。這是我的 JSON 格式和我想要實現的目標：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條經驗 獲得超5個贊
我試過解決你的問題。下面是 createRowHTML 函數的變化。
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條經驗 獲得超4個贊
您可以使用二叉樹的邏輯。對于您來說，問題可以跟蹤所有沒有子節點的節點，在頂部父節點上，將 +1 添加到 rowspan 到任何父節點
在沒有孩子的示例節點中
{
"RMP_MASTER_PERSONAL_ID": "20200325091038411761",
"RMP_MASTER_PERSONAL_NAMA": "M. TANG",
}第一個父母收到 2 行跨度“點”，下一個父母有他的孩子的行跨度總和
算法：
1 遍歷所有節點，
2 如果找到沒有子節點的節點遍歷他的所有父節點并向“rowspan”添加+1
- 2 回答
- 0 關注
- 134 瀏覽
添加回答
舉報
0/150
提交
取消