前端

img tiannet

用Javascript动态添加和删除表格行

发表于2004/10/16 15:48:00  4507人阅读

分类: web开发

1.基本思路

(1)如何“复制”?

如上图所示,如果要在表格的某行上面或下面添加新的一行,并且保证单元格中所有标签都一样,一般都是用clone的方法。但是发现clone方法对IE要求较高,须是6.0,所以我放弃这个方法,通过取得各个单元格内的html,赋予新增行相应的单元格,以达到“复制”效果。 取html会遇到一个问题,就是标签中如果value值存在的话,那么一并会取出来。而显然,我们希望新增行没有初值,所以,在增加行的时候,我将新行的所有文本框赋予空值,单选框和复选框都变成非选中状态,而下拉框则选中第一个。

(2)radio的名称(name)问题

不管是使用clone还是“复制”html的方法,radio的命名都是一个问题,因为我们希望每个单元格中的radio各成一组,而clone和“复制”html都会将radio的name一并复制过来,这样原有的radio和新增的radio拥有相同的name,对其进行输入时会相互制约。如果仅仅是找到新增的radio,并且赋予它name值是行不通的,必须明确赋予单元格内html内容,该html必须包含radio的name值,如此看来,“复制”html的方法虽然有点笨,到这里还是派上了用场^_^。我们可以得到原始的html内容,如何改变它的name呢?找出原始radio的name值,在新增行的html中替换成另外一个名称。由于这个名称只是为了给radio分组,所以可以用随机数代替,我用的是时间。

(3)如何给表格中的标签赋予name

显然,我们肯定要得到各个标签的值,也就必须知道标签的name。当提交表单时,需要用户给定一个初始的name值,然后根据这个初值,以递增的方式给各行的标签赋值,比如,如果用户设定输入文本框name初值为txt,那么所有输入文本框的name将变为:txt_0,txt_1,txt_2…….。此时大可以放心radio的顽固,虽然通过改变name的属性值无法让它的输入有效,但是对于后台的取值丝毫没有影响,如人所愿。另外,要取得所有标签的值,就必须它的个数,这个程序当然会提供一个函数获取的。

 2.程序的局限性

表格的格式必须与图中相似,程序希望不要动态操作的行(如图中的第一,二行)内不含指定的标签,所谓指定的标签就是input,textarea,select, 也是支持动态操作的标签。如果想要支持更多标签,稍微修改程序即可。不过,一般这些就足够。另外,不希望这种固定的行在表格末尾出现。而且,表格最后一列必须是添加、删除按钮。尽管有这么多局限性,但是对付一般的应用是没问题的。

3.源代码及文档下载

http://pickup.mofile.com/2430794466054426

阅读全文
0 0

相关文章推荐

img
取 消
img