table代码:
<table id="refuge-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th width="60"></th>
<th width="60">序号</th>
<th width="240">操作</th>
<th>姓名</th>
<th>微信昵称</th>
<th>手机号码</th>
<th>所在地</th>
<th>申请</th>
</tr>
</thead>
<tbody id="refuge-tbody">
</tbody>
</table>
js代码:
获取tbody的id:var tbody = document.getElementById('refuge-tbody');
函数封装:
function getDataJson(datas) {
for (var i = 0; i < datas.length; i++) {
var trow = getDataRow(datas[i], i);
tbody.appendChild(trow);
}
}
function getDataRow(rowData, number) {
var row = document.createElement('tr'); //创建行
var checkbox = document.createElement('td');//创建列
row.appendChild(checkbox);
var btnCheckbox = document.createElement('input');
btnCheckbox.setAttribute('type','checkbox');
btnCheckbox.setAttribute('value','false');
checkbox.appendChild(btnCheckbox);
var id = document.createElement('td'); //number
id.innerHTML = rowData.id;
row.appendChild(id);
var state = document.createElement('td'); //state refuse or pass
//state.innerHTML = rowData.state;
row.appendChild(state);
var refuse = document.createElement("a");
refuse.setAttribute('data-toggle',"modal" );
refuse.setAttribute('data-target',"#myModalRefuse" );
refuse.innerText = '拒绝申请';
refuse.style.color = "red";
refuse.style.cursor = "pointer";
refuse.style.textDecoration = "underline";
var pass = document.createElement("a");
pass.setAttribute('data-toggle',"modal" );
pass.setAttribute('data-target',"#myModalPass" );
pass.innerText = '通过申请';
pass.style.marginLeft = "10px";
pass.style.color = "blue";
pass.style.cursor = "pointer";
pass.style.textDecoration = "underline";
//if(rowData.state == 0) {
state.appendChild(refuse);
state.appendChild(pass);
//}
var name = document.createElement('td'); //name
name.innerHTML = rowData.name;
row.appendChild(name);
var nickname = document.createElement('td'); //nickname
nickname.innerHTML = rowData.nickname;
row.appendChild(nickname);
var phonenum = document.createElement('td'); //phonenum
phonenum.innerHTML = rowData.phonenum;
row.appendChild(phonenum);
var address = document.createElement('td'); //address
address.innerHTML = rowData.address;
row.appendChild(address);
var content = document.createElement('td'); //state refuse or pass
row.appendChild(content);
var contentBtn = document.createElement("a");
contentBtn.setAttribute('data-toggle',"modal" );
contentBtn.setAttribute('data-target',"#myModalShowContent" );
contentBtn.innerText = '查看申请内容';
contentBtn.style.color = "blue";
contentBtn.style.cursor = "pointer";
content.appendChild(contentBtn);
return row;
}
看到getDataRow函数中rowData.address
rowData.name
这些字段都是从传入的data json中获取的,一定要对上json中的key,否则是会获取不到的。
看实际效果: