js中創建table表格


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function createTable(){
var table = document.createElement("table");
table.border = "1";
table.width = "100%";

//table API
//創建一行
//var tr = table.insertRow(table.rows.length);
//創建單元格
//var td = tr.insertCell(tr.cells.length);
var tr,td;
for(var i=0;i<6;i++){
//循環插入元素
tr = table.insertRow(table.rows.length);
if(i%2 === 0){
tr.style.backgroundColor = "red";
}else{
tr.style.backgroundColor = "green";
}
for(var j=0;j<5;j++){
td = tr.insertCell(tr.cells.length);
td.innerHTML = "第"+i+"行,第"+j+"列";
td.align = "center";

}
}

//td.innerHTML = "測試";

document.querySelector("#tb").appendChild(table);
}
</script>
</head>
<body>
<input type="button" onclick="createTable()" value="createTable">
<hr>
<div id="tb"></div>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM