关于HTML元素的Table控件javascript添加删除表中行列的方法!

原创 2007年09月18日 17:15:00
如何生成3行3列的表格?
例子一:
<script>
var id = 0;
 function addTable(row){
for(var i = 0;i<=row;i++)
 tr = TableForm.insertRow();
 td = tr.insertCell();
 td.id = "td1"+i;
 td = tr.insertCell();
 td.id = "td2"+i;
 td = tr.insertCell();
 td.id = "td3"+i;
 eval("td1"+id+".height = '22'");//可以为表格设置高度或者其它属性
}
</script>

生成效果:
<table border="0" align="center" id="TableForm">
<tr>
<td id=“td10“ height = '22'></td>
<td id=“td20“></td>
<td id=“td30“></td>
<tr>
<tr>
<td id=“td11“ height = '22'></td>
<td id=“td21“></td>
<td id=“td31“></td>
<tr>
<tr>
<td id=“td12“ height = '22'></td>
<td id=“td22“></td>
<td id=“td32“></td>
<tr>
</table>

如果在单元格中添加控件?
eval("td0"+id+".height = '22'");//可以为表格设置高度或者其它属性
接例子一最后一行继续:
 eval("td0"+id+".innerHTML+=str(/"strtds0/")");
 eval("td1"+id+".innerHTML+=str(/"strtds1/")");
 eval("td2"+id+".innerHTML+=str(/"strtds2/")");

str写法:
 function str(str){
 var strtds0 = "<input name='checBox' type='checkbox' id='checBox' value='"+ id +"'> "+id;
 var strtds1 = ""+
 "标题:<input name='title"+ id +"' type='text' id='title"+ id +"' size='30' maxlength='50'>"+
    "地址: <input name='htt_link"+ id +"' type='text' id='htt_link"+ id +"' size='30' maxlength='30'>";
 var strtds2 = "<input name='Submit_selec"+ id +"' type='button' id='Submit_selec"+ id +"' value='选择新闻' onclick='add_new(form2,form2.select"+ id +".value,"+ id +")' >"+
    "   <select name='select"+ id +"'>"+
    "      <option value='00' selected>--选择类别--</option>"+
    "      <option value='01'>专题</option>"+
    "      <option value='03'>图片新闻</option>"+
    "      <option value='10'>所有新闻</option>"+
    "      <option value='111'>论坛</option>"+
    "    </select>"+
 "    <input type='button' value='查看' onclick='ope("+ id +")'>";
 
 if(str == "strtds1")
 return(strtds1);
    if(str == "strtds2")
 return(strtds2);
 if(str == "strtds0")
 return(strtds0);
 }

innerHTML就是向id所表示的标签中添加HTML代码,注Table与tr中的属性是只读属性td才可以修改!

如何删除一行?

TableForm.deleteRow(第几行);

如何遍历行?

TableForm.rows.length
取得表格的行数!

如何访问行中的td?

TableForm.rows.roms(第几行).cell(第几列).属性

如按例子一alert(TableForm.rows(0).cell(0).id)输出值是 'td00'
 

相关文章推荐

【javascript】table对象操作,动态创建,删除指定行列

function createTab(){ //动态创建表格 var tabNode = document.createElement("table"); tabNode.setAttribu...

好好学一遍javaScript 笔记(四)——Attribute、HTML元素、文档碎片、table操作

欢迎技术交流。 QQ:138986722 getAttribute、setAttribute获取跟设置对象的属性: function documentTest(){ var oHtm...
  • hzw2312
  • hzw2312
  • 2011年12月27日 14:25
  • 2034

【Web】JavaScript获取HTML DOM节点元素的方法的总结

在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很...

javascript获取HTML DOM节点元素的方法的总结

javascript获取HTML DOM节点元素的方法的总结http://zdq0426.blog.163.com/blog/static/22169094200910211109559/...
  • WYZSC
  • WYZSC
  • 2011年03月30日 16:33
  • 516

JavaScript获取网页中HTML元素的几种方法分析

举个例子:   网页陶吧   同一页面内的引用方法:   1、使用id:   link1.href,返回值为http://homepage.yesky.com   2、使用name:   ...

JavaScript获取HTML DOM节点元素的方法的总结

在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很...

JavaScript获取HTML DOM节点元素的方法总结

1. 通过顶层document节点获取:            (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单...
  • XTZZ92
  • XTZZ92
  • 2016年07月20日 15:50
  • 577

黑马程序员-JavaScript获取HTML DOM节点元素的方法的总结

1. 通过顶层document节点获取:  (1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面...

Html/javascript动态添加/删除input控件到地址定位置

Html/javascript动态添加/删除input控件到地址定位置 发布 另存 成果基本信息修改: 成果名:成果位置: ...
  • dusea
  • dusea
  • 2015年09月01日 11:18
  • 979
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于HTML元素的Table控件javascript添加删除表中行列的方法!
举报原因:
原因补充:

(最多只允许输入30个字)