表格动态增加行(JS)

最新推荐文章于 2025-05-26 12:15:21 发布

转载最新推荐文章于 2025-05-26 12:15:21 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Qizai/archive/2007/09/18/897752.html

文章标签：

#javascript #前端 #ViewUI

我最近一直在学Javascript, 因为在项目用的比较多，虽然现在大家都在说Web标准，实际上还没有一个严格的定义，我理解的Web标准是把结构、表现、行为这三者结合表现出来就OK了。那用什么来表现呢？当然是CSS样式，行为用什么来控制呢？就是Javascript,可想而知学习Javascript的重要性了，当然除了Javascript，还有Vbscript,不过本人比较倾向Javascript ,我也是刚学Javascript,以前一直忽视它，希望感兴趣的朋友一起学习，共同提高，哪位在这方面有经验的可以共享一下，好的论坛，网站，书籍等等！
回到话题：今天要说的是用JS脚本实现表格动态增加行。

实现代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="动态增加行">
<META NAME="Description" CONTENT="http://qwzsky.cnblogs.com/">
</HEAD>
<style type="text/css">
table{
border : 1px solid black ;
}
td{
width : 100px ;
border : 1px solid black ;
}
</style>

<script language="javascript" type="text/javascript">
var rowNum = 0;
function insertRow()
{
var table1 = document.getElementById("tbl");
var tr1 = document.createElement("tr");

for (var j=0;j<3; j++)
{
var td1 = document.createElement("td");
var tn = document.createTextNode(rowNum);
td1.appendChild(tn);
tr1.appendChild(td1);
}
rowNum = rowNum + 1;
//alert(tr1.childNodes[0].innerText);
table1.childNodes[0].appendChild(tr1);
//alert(table1.outerHTML);
}
</script>

<BODY>
<input id="Insert" type="button" value="Insert" onclick="insertRow();">
<table border="1" id="tbl">
   <tr>
      <td>NO</td>
      <td>UserID</td>
      <td>Name</td>
   </tr>
</table>
</BODY>
</HTML>

keyword : 动态增加行,表格增加行,js动态增加行, 追加行,table行追加

转载于:https://www.cnblogs.com/Qizai/archive/2007/09/18/897752.html