我目前有一个只有标题的HTML表,直到添加输入为止,我想创建一个具有清晰行的表,一旦添加数据,就可以填充该行。任何建议/帮助都将对我有帮助去做吧。
当前表;
所需表;
表格代码;
<div>
<table id="requestContents">
<colgroup>
<col style="width: 128px">
<col style="width: 136px">
<col style="width: 84px">
<col style="width: 113px">
<col style="width: 123px">
</colgroup>
<tr>
<th>Request ID</th>
<th>Request Type</th>
<th>Blood Type</th>
<th>Notice</th>
<th>Request Date</th>
</tr>
</table>
</div>
这就是我向表中添加数据的方式;
ipcRenderer.on('Request:DonorInformation', function(event, requestType, bloodType, Notice) {
var datetime = currentdate.getDate() + "/"
+ (currentdate.getMonth()+1) + "/"
+ currentdate.getFullYear() + " "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes()
var table = document.getElementById("requestContents");
const createRow = document.createElement('tr')
const requestIDAdd = document.createElement('td')
const requestTypeAdd = document.createElement('td')
const bloodTypeAdd = document.createElement('td')
const noticeAdd = document.createElement('td')
const dateAdd = document.createElement('td')
const requestID = document.createTextNode(" ")
const requestTypeText = document.createTextNode(requestType)
const bloodTypeText = document.createTextNode(bloodType)
const NoticeText = document.createTextNode(Notice)
const dateText = document.createTextNode(datetime)
requestIDAdd.appendChild(requestID)
requestTypeAdd.appendChild(requestTypeText)
bloodTypeAdd.appendChild(bloodTypeText)
noticeAdd.appendChild(NoticeText)
dateAdd.appendChild(dateText)
createRow.appendChild(requestIDAdd)
createRow.appendChild(requestTypeAdd)
createRow.appendChild(bloodTypeAdd)
createRow.appendChild(noticeAdd)
createRow.appendChild(dateAdd)
table.appendChild(createRow)
})
答案 0 :(得分:2)
添加一个新的<tr>
,其中有5个空的<td>
(每行要添加一次):
<table>
...
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
答案 1 :(得分:2)
您可以-只需循环并添加所需的许多行和列:
var addRows = 3;
var columns = 5;
var table = document.getElementById("requestContents");
for (var i = 0; i < addRows; i++) {
let row = document.createElement("tr");
for (var j = 0; j < columns; j++) {
let cell = document.createElement("td");
row.appendChild(cell);
}
table.appendChild(row);
}
<div>
<table id="requestContents" border="1">
<colgroup>
<col style="width: 128px">
<col style="width: 136px">
<col style="width: 84px">
<col style="width: 113px">
<col style="width: 123px">
</colgroup>
<tr>
<th>Request ID</th>
<th>Request Type</th>
<th>Blood Type</th>
<th>Notice</th>
<th>Request Date</th>
</tr>
</table>
</div>