首页 / JAVASCRIPT / javascript动态添加表格行_JavaScript

javascript动态添加表格行_JavaScript

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript动态添加表格行_JavaScript，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1790字，纯文字阅读大概需要3分钟。

内容图文

表格部分代码如下：

<table id="testTbl" border=1>

<tr id="tr1">

<input type=checkbox id="box1">

第一行

<tr id="tr2">

<input type=checkbox id="box2">

第二行

<input type=checkbox id="box3">

第三行

动态添加表行的javascript函数如下：

function addRow(){

//添加一行

var newTr = testTbl.insertRow();

//添加两列

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

//设置列内容和属性

newTd0.innerHTML = '<input type=checkbox id="box4">';

newTd2.innerText= '新加行';

}

就这么简单，做点详细的说明：

1、inserRow()和insertCell()函数

insertRow()函数可以带参数，形式如下：

insertRow(index)

这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。

insertCell()和insertRow的用法相同。

2、动态设置属性和事件

上面行数中的innerHTML和innerText都是列的属性。

这个inner，就是“inner”到之间，innerText是添加到之间的文本，innerHTML是添加到之间的HTML代码(这个so简单，这个解释挺多余的)

设置其他属性也是用同样的方式，比如，设置行背景色

newTr.bgColor = 'red';

设置事件也一样，需要简单说明一点。

比如，我要让点击新加行的时候执行一个自己定义的函数 newClick,newClick行数如下：

function newClick(){

alert("这是新添加的行");

｝

对onclick事件设置这个函数的代码如下：

newTr.onclick = newClick;

这里需要主义的是，＝后面的部分必须是函数名,而且不能带引号，

newTr.onclick = newClick();

newTr.onclick = 'newClick';

newTr.onclick = "newClick";

上面的写法都是错误的。

为什么，其实知道为什么没有什么意思，知道怎么用就OK了，如果不想知道，可以跳过下面这一段。

实际上这个=后面的newClick是指向自己定义的newClick函数的指针，javascript里面函数名就是指向函数的指针，加了引号括号什么的浏览器就找不到那个函数了。

下面的写法，也是正确的

newTr.onclick = function newClick(){

alert("这是新添加的行");

｝

这个使用函数名实际上是一样的

设置其他的事件用法相同。

内容总结

以上是互联网集市为您收集整理的javascript动态添加表格行_JavaScript全部内容，希望文章能够帮你解决javascript动态添加表格行_JavaScript所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/305419.html

来源：【匿名】