我已经使用 javascript 从“json”构建了一个动态 html 表。我希望该investmentNo值是一个链接，该链接将在单击时显示带有持续时间、日期和时间的动态模态表。
var myInvestment = [{
"investmentNo": "00032",
"amount": "70000",
"status": "Running"
},
{
"investmentNo": "00033",
"amount": "40000",
"status": "cleared"
},
{
"investmentNo": "00034",
"amount": "5000",
"status": "Rejected"
},
{
"investmentNo": "00035",
"amount": "40000",
"status": "Approved"
}
];
var investmentTable = document.querySelector("#investmentTable");
var noOfInvestment = myInvestment.length;
if (noOfInvestment > 0) {
var col = []; // define an empty array
for (var i = 0; i < noOfInvestment; i++) {
for (var key in myInvestment[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// CREATE TABLE HEAD .
var tHead = document.querySelector("#tableHead");
// CREATE ROW FOR TABLE HEAD .
var hRow = document.querySelector("#tableRow");
// ADD COLUMN HEADER TO ROW OF TABLE HEAD.
tHead.appendChild(hRow);
investmentTable.appendChild(tHead);
// CREATE TABLE BODY .
var tBody = document.createElement("tbody");
// ADD COLUMN HEADER TO ROW OF TABLE HEAD.
for (var i = 0; i < noOfInvestment; i++) {
var bRow = document.createElement("tr"); // CREATE ROW FOR EACH RECORD .
var td = document.createElement("td");
td.innerHTML = i + 1;
bRow.appendChild(td);
for (var j = 0; j < col.length; j++) {
var td = document.createElement("td");
td.innerHTML = myInvestment[i][col[j]];
bRow.appendChild(td);
}
tBody.appendChild(bRow)
}
investmentTable.appendChild(tBody);
}<table class="table table-bordered table-striped table-vcenter js-dataTable-full-pagination table-responsive" id="investmentTable">
<thead id="tableHead">
<tr id="tableRow">
<th class="text-center" style="width: 30%;" id="serialNo">S/N</th>
<th class="d-sm-table-cell" style="width: 30%;" id="investmentNo">Investment No</th>
<th class="d-sm-table-cell" style="width: 30%;" id="amount">Amount</th>
<th class="d-sm-table-cell" style="width: 30%;" id="status">Status</th>
</tr>
</thead>
</table>我希望这个能帮上忙
var myInvestment = [{
"investmentNo": "00032",
"amount": "70000",
"status": "Running"
},
{
"investmentNo": "00033",
"amount": "40000",
"status": "cleared"
},
{
"investmentNo": "00034",
"amount": "5000",
"status": "Rejected"
},
{
"investmentNo": "00035",
"amount": "40000",
"status": "Approved"
}
];
var investmentTable = document.querySelector("#investmentTable");
myInvestment
.forEach((item, i) => {
var row = investmentTable.insertRow();
row.insertCell(0).innerHTML = i + 1;
row.insertCell(1).innerHTML = `<a href="google.com/${item.investmentNo}">${item.investmentNo}</a>`;
row.insertCell(2).innerHTML = item.amount;
row.insertCell(3).innerHTML = item.status;
});<table class="table table-bordered table-striped table-vcenter js-dataTable-full-pagination table-responsive" id="investmentTable">
<thead id="tableHead">
<tr id="tableRow">
<th class="text-center" style="width: 30%;" id="serialNo">S/N</th>
<th class="d-sm-table-cell" style="width: 30%;" id="investmentNo">Investment No</th>
<th class="d-sm-table-cell" style="width: 30%;" id="amount">Amount</th>
<th class="d-sm-table-cell" style="width: 30%;" id="status">Status</th>
</tr>
</thead>
</table>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句