不如我有一塊代碼
<table>
<div id="div0">
<tr>
<td id="num0">學號</td>
<td id="class0">班級</td>
<td id="name0">姓名</td>
<td id="age0">年齡</td>
</tr>
</div>
</table>
現在我想將 div0 這一塊代碼 循環添加
根據我傳入的list.length的值,添加相應的個數。
並且使 div0-->divn 、 num0--->numn ..等等自增
並影藏每一行的學號!
改如何做?
JS JQ都可以。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
var table;
$(document).ready(function(){
table = $('table');
rows = [
{xh:"學號0",bj:"班級0",na:"名字0",age:"年齡0"}
,{xh:"學號1",bj:"班級1",na:"名字1",age:"年齡1"}
,{xh:"學號2",bj:"班級2",na:"名字2",age:"年齡2"}
,{xh:"學號3",bj:"班級3",na:"名字3",age:"年齡3"}
]
addRows(table,rows);
});
function addRows(table,rows){
for(var i=0;i<rows.length;i++){
var row = rows[i];
var divEle= $('<div id="div'+i+'"></div>');
var trEle = $('<tr></tr>');
var tdEleHtml ='<td id="num'+i + '" style="display:none">'+row.xh+'</td>'
+'<td id="class'+i+'">'+row.bj+'</td>'
+'<td id="name'+i+'">'+row.na+'</td>'
+'<td id="age'+i+'">'+row.age+'</td>';
var tdEles = $(tdEleHtml);
trEle.append(tdEles);
divEle.append(trEle );
table.append(divEle);
}
}
</script>
</head>
<body>
<table>
</table>
</body>
</html>