基于JavaScript实现动态创建表格和增加表格行数

前端技术 2023/09/03 JavaScript

在工作，项目需求中，有时候表格的行数不能够满足我们的需求，这时需要我们动态的增加表格的行数，下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法，并且还实现了隔行变色功能。对此感兴趣的朋友可以参考一下代码：

js代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<title>动态操作表格</title>
</head>
<body>
<script type=\"text/javascript\">
var n = 0;
function showTable(len) 
{
 wi(\'<table border=\"1\" width=\"300\" style=\"border-collapse:collapse\"><tbody id=\"table\">\');
 for (i=0;i<len;i++) 
 {
 if (parseInt(i%2)==1) 
{
  bg = \'#F4FAC7\';
 } 
else 
{
  bg = \'white\'; 
 }
 wi(\'<tr bgcolor=\'+bg+\'><td>第\'+(i+1)+\'行</td></tr>\'); 
 }
 wi(\'</tbody></table><br />\');
 wi(\'<input type=\"button\" value=\"Add\" id=\"add\" />\'); 
}</P>
<P>function wi(str) 
{
 return document.write(str); 
}
showTable(10);
var add = document.getElementById(\"add\");
 add.onclick = function() {
 n = n+1;
 if (n%2==0) 
 {
 bg = \'#F4FAC7\';
 } 
 else 
 {
 bg = \'white\'; 
 }
 var table = document.getElementById(\"table\");
 var tr = document.createElement(\"tr\");
 tr.bgColor = bg;
 var td = document.createElement(\"td\");
 td.innerHTML = \'第\'+(10+n)+\'行\';
 tr.appendChild(td);
 table.appendChild(tr);
}
</script>
</body>
</html>

以上内容是基于JavaScript实现动态创建表格和增加表格行数的相关代码，希望大家喜欢。

本文地址：https://www.stayed.cn/item/6149

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案