关于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'
 

lua 中删除table中的多个元素

转载自:http://m.blog.csdn.net/blog/zxt5105515/34114555 很多时候,我们有这样的需求:删除table中若干符合条件的元素,最原始的想法就是用fo...
  • harryptter
  • harryptter
  • 2015年08月06日 19:08
  • 2657

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

Html/javascript动态添加/删除input控件到地址定位置 发布 另存 成果基本信息修改: 成果名:成果位置: ...
  • dusea
  • dusea
  • 2015年09月01日 11:18
  • 1150

使用table自带方法和DOM方法操作HTML table的区别

注:使用createDocumentFragment创建TABLE 行的效率要高 使用table自带方法和DOM方法操作HTML table的区别 table表格的操作有两种方法,...
  • hongweigg
  • hongweigg
  • 2015年01月05日 17:22
  • 1478

lua 删除key,value table中指定元素

要删除key,value中table中指定的元素, 不能简单的使用for循环来删除 原因如下: 在table表中使用for迭代时,将符合条件的元素删除时,后面元素前移,然后产生跳跃 而且使用for ...
  • terry7
  • terry7
  • 2015年08月22日 10:23
  • 7790

JQuery与HTML元素的获取、设置、添加、删除

1.JQuery     JQuery是JavaScript的一种封装库。          JavaScript从根本上讲,是获取HTML页面的元素,然后针对该元素不同的状态做出不同的事件反映。所以...
  • mengdonghui123456
  • mengdonghui123456
  • 2016年01月13日 21:20
  • 949

Javascript:DOM 节点(新建HTML元素/删除HTML元素)

使用DOM可以新建HTML元素,也可以删除已有的HTML元素。
  • books1958
  • books1958
  • 2015年02月02日 14:29
  • 2331

Jquery html<table>数据行的添加和删除

1.运行结果 2.需要引用的js文件                     3.源码 ...
  • xuanwuziyou
  • xuanwuziyou
  • 2014年01月17日 12:16
  • 2998

动态生成行,序号随之增加,删除后依然按顺序。所以给动态生成的html元素绑定click事件

一张表格要动态实现添加行,然后序列号还要随着增加,当删除的时候序列号依旧是按顺序排列。...
  • qianqianstd
  • qianqianstd
  • 2017年03月03日 22:35
  • 923

lua删除table中的多个元素

很多时候,我们有这样的需求,删除table中若干符合条件的元素,
  • zxt5105515
  • zxt5105515
  • 2014年06月24日 17:36
  • 1724

动态添加修改删除html表格内容

1.需求需要实现收银台上添加修改删除商品信息时顾显可以实时看到其变化2.解决收银台和顾显通过tcp传输进行数据通信,顾显通过操作html中的表格进行数据添加修改和删除操作3.代码mytest.html...
  • zhang_ruiqiang
  • zhang_ruiqiang
  • 2015年07月14日 10:56
  • 3349
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于HTML元素的Table控件javascript添加删除表中行列的方法!
举报原因:
原因补充:

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