几种实用的JavaScript鼠标特效,在我们平时网页设计中,鼠标特效可以说是常常会用到,那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效,希望对大家有用。......
2023-03-17 528 JAVASCRIPT 鼠标
js如何向表格的倒数第二行插入数据?想要通过javascript脚本来实现向表格中动态修改数据,首先需要获取相关html对象,再对其属性值进行修改来达到目的。下面,小编就以实例来为大家一一进行介绍。
搭建测试环境
打开记事本,输入以下代码:
html>
head>
meta charset="utf-8">
title>花名册/title>
/head>
body>
br/>br/>
center>
table border="1" width=400px >
tr>
th>姓名/th>th>性别/th>th>年龄/th>
/tr>
tr align=middle>
td>刘二/td>td>男/td>td>18/td>
/tr>
tr align=middle>
td>张三/td>td>男/td>td>16/td>
/tr>
tr align=middle>
td>李四/td>td>女/td>td>20/td>
/tr>
tr align=middle>
td>王五/td>td>男/td>td>19/td>
/tr>
/table>
/center>
/body>
/html>
保存成网页文件test.html。如不清楚如何保存,请查看下面经验"创建网页"部分。
5如何创建站点首页
双击打开test.html,浏览器中运行效果如下图所示:
获取表格的总行数
在网页代码/body>标签后加入以下代码:
script language=javascript>
var row;
row=document.getElementsByTagName('tr').length;
alert("表格总行数为:" row);
/script>
其中row就是用javascript脚本获取到的表格总行数,而row-2就是表格中倒数第二行在document.getElementsByTagName('tr')数组中的index。
获取表格倒数第二行的html内容
通过以下语句可获取表格倒数第二行的html内容。
document.getElementsByTagName('tr')[row-2].innerHTML;
效果如图所示:
替换整行html内容实现单元格值修改
即然我们能够获取表格倒数第二行的html代码内容,我们也能够通过设置倒数第二行的html代码内容来实现更改其单元格中的值。
如:
document.getElementsByTagName('tr')[row-2].innerHTML="td>赵七/td>td>女/td>td>18/td>"
定位单元格进行值修改
如果你只想修改某一单元格的值,还可以修改代码如下:
document.getElementsByTagName('tr')[row-2].children[0].innerHTML="孙大圣";
children[0]表示第一个单元格对象。如果要修改其它单元格,只需修改方括号的数字即可。
多个表格的处理
如果有多个表格,则可以通过document.getElementsByTagName('table')[?]来定位表格,或给表格添加一个id然后利用document.getElementsById('tableID')来定位表格。如:
document.getElementsByTagName('table')[0].getElementsByTagName('tr')[row-2].children[0].innerHTML="孙大圣1";
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
标签: JAVASCRIPT
相关文章
几种实用的JavaScript鼠标特效,在我们平时网页设计中,鼠标特效可以说是常常会用到,那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效,希望对大家有用。......
2023-03-17 528 JAVASCRIPT 鼠标
如何开始学习javascript,html是网页的内容,c是网页的格式,h是网站的后台,j是网站的前端,那么如何学习j,才能高效?......
2023-03-17 256 JAVASCRIPT