通过一个 button动态的为Table添加行。要求是纯javascript,请高手指教。我试过 tableObj.innerHTML+=tableObj.innerHTML.substring(0,tableObj.innerHTML-8)//因为</table>结尾
+"<tr><td>data</td></tr></table>"
+"<tr><td>data</td></tr></table>"
解决方案 »
- 鼠标移上换图的超链接怎么做?
- js中execCommand方法在网页中插入链接
- 返回上一页以后为何不执行body onLoad函数?
- 如何得到左右坐标????
- 我要在网页中设计一个在线播放一个媒体文件,如MP3,或一段影音文件,代码怎么写?请教,谢谢!在线等
- 问一下CSDN主页上面哪两个广告的效果如何实现?
- 听说CSDN上都是高手,帮帮忙救我,各位好心的大虾。
- Javascript中动态创建的对象由谁来销毁?如果不Delete会不会出问题?
- 求学好jquery的基础是什么?快要学了《→大神们_求答案
- 原样输出评论内容 <script> </script><h1></h1>等
- 简单问题
- radio后面的输入框验证
var i = 1;
function insRow()
{
var j = 1;
var obj=document.getElementById('myTable').insertRow();
obj.insertCell().innerHTML = "<font color=red>第"+i+"行第1列</font>";
obj.insertCell().innerHTML = "<font color=red>第"+i+"行第2列</font>";
obj.insertCell().innerHTML = "<font color=red>第"+i+"行第3列</font>";
i++;
}
</script>
</head><body>
<table id="myTable" border="1">
</table>
<form>
<input type="button" onclick="insRow();" value="新增一行">
</form>
<head>
<script type="text/javascript">
window.onload = function(){
var tableObj = document.getElementById('table');
tableObj.insertRow(tableObj.rows.length).appendChild(document.createElement('td')).innerHTML = ' '
alert(tableObj.innerHTML);
}
</script>
</head>
<body>
<table id="table" width="200" border="1">
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
<table id="testTbl" border=1><tr id="tr1"><td width=6%><input type=checkbox id="box1"></td><td id="b">第一行</td></tr><tr id="tr2"><td width=6%><input type=checkbox id="box2"></td><td id="b">第二行</td></tr><tr bgcolor=#0000FF><td width=6%><input type=checkbox id="box3"></td><td>第三行</td></tr></table>动态添加表行的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”到<tb></tb>之间,innerText是添加到<tb></tb>之间的文本,innerHTML是添加到<tb></tb>之间的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("这是新添加的行");}这个使用函数名实际上是一样的设置其他的事件用法相同。
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/rjzou2006/archive/2008/01/15/2045116.aspx
var table = document.createElement("table");var tbody = document.createElement("tbody");var tr = document.createElement("tr"); // 创建一行var td = document.createElement("td"); // 创建一列td.createTextNode("123456");
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);document.body.appendChild(table);
这样创建 兼容 IE,FF ;
如果用insertCell(); 用FF必须指定索引