前述：終于抽出時間，整理了一些程式設計所需基礎知識。
js周遊json資料再添加到table中。選擇所需行後點選送出拿到id傳給背景，（也可以放入集合一起給）。
先看效果：
選擇點選後：
code：
<body>
<div id="tb"></div>
<button onclick="submit()">送出</button>
<script>
var jsonstr = '[{"id":"01sdfae24lj0s34k4234kijwerm3", info0: "01", "info2": "梨子", "info3": "3個"},' +
'{"id":"02sdfae24lj0s66d32t6gu9jwerm3", "info0": "02", "info2": "蘋果", "info3": "3個"},' +
'{"id":"03sdfae24lj0s348t53f78tty843","info0": "03","info2": "香蕉", "info3": "6個"},' +
'{"id":"04sdfae24lj0s34k4kd45gtrrm3","info0": "04","info2": "橘子", "info3": "6個"}]';
function tablef() {
var jsonData = new Function("return " + jsonstr)();
var table = document.createElement("table");
table.className = "table";
table.id = "table";
htmls = "<tr>" +
"<td style='width:25px;'></td>" +
"<td style='width:50px;'>序号</td>" +
"<td style='width:100px;'>名稱</td>" +
"<td style='width:100px;'>個數</td>" +
"</tr>";
table.innerHTML = htmls;
for (i = 0; i < jsonData.length; i++) {
var trs = document.createElement("tr");
var v = i + 1;
var inbx = "<td><input class='checkbox-css' id='cbx_" + v + "' value='' type='checkbox'/></td>";
trs.innerHTML = inbx;
for (tdvalue in jsonData[i]) {
var td = document.createElement("td");
td.appendChild(document.createTextNode(jsonData[i][tdvalue]));
if (tdvalue == "id") {
td.className = "disno";
}
trs.appendChild(td);
}
table.appendChild(trs);
}
document.getElementById("tb").appendChild(table);
}
window.onload = function () {
tablef();
};
//submit
function submit() {
var table = document.getElementById('table');
for (i = 1; i < table.rows.length; i++) {
var id = document.getElementById("cbx_" + i);
if (id.checked) {
console.log(table.rows[i].cells[1].innerHTML);
}
}
}
</script>
</body>
所需小知識：
1、js建立table：
<table id="tb"></table>
<script>
var oTab = document.getElementById('tb');
trHtml = "<tr>" +
"<th style='width: 6%;'></th>" +
"<th style='width: 6%;'>1</th>" +
"</tr>";
oTab.innerHTML = trHtml;
for (var i = 0; i < 4; i++) {
var oTr = document.createElement('tr');
var inbx="<td><input class='checkbox-css' id='itcheckbox' type='checkbox'/></td>";
oTr.innerHTML=inbx;
for (var j = 0; j < 4; j++) {
var oTd = document.createElement('td');
oTr.appendChild(oTd);
}
oTab.appendChild(oTr);
}
</script>
2、table樣式：
合并線條： border-collapse: collapse;
文字居中： text-align: center;
文字顔色： color: #666;
添加框線： border: 1px solid #caf1c5;
背景顔色： background-color: #CCE8EB;
整體背景色：background: #fff;
标簽隐藏：display: none;
整體css：
<style type="text/css">
table
{
border-collapse: collapse;
text-align: center;
}
table td, table th
{
border: 1px solid #caf1c5;
color: #666;
height: 30px;
}
table thead th
{
background-color: #CCE8EB;
width: 100px;
}
table tr:nth-child(odd)
{
background: #fff;
}
table tr:nth-child(even)
{
background: #f1f3fd;
}
</style>
3、js基礎知識：https://blog.csdn.net/xysxlgq/article/details/119570069
。