您的位置：首页 > Web前端 > JavaScript

表格动态增加行(JS)

2007-09-18 22:23 351 查看

我最近一直在学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行追加

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航