JavaScript 生成 table 表格

快乐打工仔 分类:实例代码

本文分享一段代码实例,利用 JavaScript 动态生成指定行列 table 表格。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script>
var lie = 0;
var hang = 0;
function makeTabble() {
  var lie = 0;
  var hang = 0;
 
  hang = document.getElementById('inputOne').value;
  lie = document.getElementById('inputTwo').value;
  document.getElementById('inputOne').value = '';
  document.getElementById('inputTwo').value = '';
  var theTable = document.createElement("table");
  theTable.style.border = "1px solid #8c8c8c"
  for (i = 0; i < hang; i++) {
    var hangEle = document.createElement("tr");
    for (j = 0; j < lie; j++) {
      var lieEle = document.createElement("td");
      lieEle.style.width = "80px";
      lieEle.style.height = "30px";
      lieEle.style.border = "1px solid #8c8c8c"
      hangEle.appendChild(lieEle);
    }
    theTable.appendChild(hangEle);
  }
  document.body.appendChild(theTable);
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    makeTabble();
  }
}
</script>
</head>
<body>
<h1>生成表格</h1>
行数:<input type="text" id="inputOne" /> 
列数:<input type="text" id="inputTwo" /> 
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

代码确实非常简单,更多内容可以参阅相关阅读。

相关阅读:

(1).document.createElement() 参阅 document.createElement() 一章节。

(2).appendChild() 参阅 JavaScript appendChild()一章节。

JavaScript 生成 table 表格,这样的场景在实际项目中还是用的比较多的,关于JavaScript 生成 table 表格就介绍到这了。

JavaScript 生成 table 表格属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容