1、首先看下我们的HTML代码,代码很简单,就是一个表格,表格里有几行数据,和几个输入框,一个按钮。具体代码如图,
2、运行下页面,我们看到现在页面的效果如图。
3、添加一个JS方法:add_data,通过该方法可以修改table里单元格的数据,代码如图,大概意思讲鞅瓞慈玢解下,先通过id用Jquery来找到table,然后找table里的行tr,通过传入的参数row_num,定位到是第几行的tr,然后再找这个tr下的单元格td,也是通过参数来找(c_num)。找到该单元格后,就通过Jquery的html()方法来设置该单元格的值。
4、然后为页面上的按钮添加点击事件,点击后先取到输入框里的数据,第几行,第几列的单侍厚治越元格,要更新的数据。等到这个数据后,就调用add_data方法去更新table的单元格,具体代码如图。
5、所有代码准备完毕,刷新页面,在单元格里输入参数如图,并点击‘更改’按钮。
6、点击按钮后,我们可以看到table里最后一个单元格的内容填充上了。(为什么输入的行是4?因为第一行的标题行也算是一行的)
7、我们修改输入框的数据,要改第三行,第二列的数据,如图
8、点击更改后,该单元格的数据也成功修改了。如要为指定的表格插入数据,更新数据,我们在调用add_data方法骀旬沃啭时,为第一个参数填上不同的值就行了,要改table的id为tb2的表格的数据,就把这参数改成 tb2。