前言：
此时你们对“js获取表格的行”大体比较注意，咱们都需要学习一些“js获取表格的行”的相关知识。那么小编同时在网上网罗了一些对于“js获取表格的行””的相关文章，希望咱们能喜欢，同学们快快来了解一下吧！表单常用的DOM操作
Table 对象集合(行与列从0开始计数)
cells[] 返回包含表格中所有单元格的一个数组。
rows[] 返回包含表格中所有行的一个数组。
tBodies[] 返回包含表格中所有tbody 的一个数组
针对<table>元素(行与列从0开始计数)
caption 指向<caption>元素(如果存在)
tBodies 指向<tbody>元素的集合
tFoot 指向<tfoot>元素(如果存在)
tHead 指向<thead>元素(如果存在)
rows 表格中所有行的集合
deleteRow(position) 删除指定位置上的行
insertRow(position) 在rows集合中的指定位置插入一个新行
createCaption() 创建<caption>元素并将其放入表格中;//括号内不需要插入值
deleteCaption() 删除<caption>元素 //括号内不需要插入值
针对<tbody>元素(手册上没有)
rows <tbody>中所有行的集合
deleteRows(position) 删除指定位置上的行 浏览器已不支持
insertRows(position) 在rows集合中的指定位置插入一个新行 浏览器已不支持
针对<tr>元素
cells <tr>中所有单元格的集合
deleteCell(position) 删除给定位置上的单元格
insertCell(position) 在cells集合的给定位置上插入一个新的单元格
注意：是否使用tBodies[0]属性, 将会影响所操作的行与列
而浏览器已经删除了deleteRows(position)、insertRows(position)方法, 统一使用deleteRow()、insertRow()方法
获取表格的数据:
实例1:
<html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){var oTab=document.getElementById('tab1');//alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);alert(oTab.tBodies[0].rows.length); //返回值为:5 因为<tbody></tbody>标记内有5行alert(oTab.rows.length); //tBodies[0]可以省略, 但返回值为:6 因为<thead></thead>标记有1行, <tbody></tbody>标记内有5行};</script></head><body><table id="tab1" border="1" width="500"><thead> <!-- 尽管没有<tr>标记, 但浏览器也认定算是一行 --><td>ID</td><td>姓名</td><td>年龄</td></thead><tbody><tr><td>1</td><td>Blue</td><td>27</td></tr><tr><td>2</td><td>张三</td><td>23</td></tr><tr><td>3</td><td>李四</td><td>28</td></tr><tr><td>4</td><td>王五</td><td>25</td></tr><tr><td>5</td><td>张伟</td><td>24</td></tr></tbody></table></body></html>动态添加表格:
<script language="javascript">window.onload=function(){var oTr = document.getElementById("member").insertRow(2); //插入一行var aText = new Array();aText[0] = document.createTextNode("fresheggs");aText[1] = document.createTextNode("W610");aText[2] = document.createTextNode("Nov 5th");aText[3] = document.createTextNode("Scorpio");aText[4] = document.createTextNode("1038818");for(var i=0;i<aText.length;i++){var oTd = oTr.insertCell(i);oTd.appendChild(aText[i]);}}</script>修改单元格内容:
当表格建立了以后,可以通过HTML DOM属性直接对单元格进行引用,相比getElementById()、getElementsByTagName()等方法一个个寻找要方便得多;
oTable.rows[i].cells[j]
<script language="javascript">window.onload=function(){var oTable = document.getElementById("member");oTable.rows[3].cells[4].innerHTML = "lost"; //修改单元格内容}</script>动态删除表格:
<script language="javascript">window.onload=function(){var oTable = document.getElementById("member");oTable.deleteRow(2); //删除一行，后面的行号自动补齐oTable.rows[2].deleteCell(1); //删除一个单元格，后面的也自动补齐}</script>动态删除表格的行
<script language="javascript">function myDelete(){var oTable = document.getElementById("member"); //经过测试,这是多余的语句//删除该行this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);}window.onload=function(){var oTable = document.getElementById("member");var oTd;//动态添加delete链接for(var i=1;i<oTable.rows.length;i++){oTd = oTable.rows[i].insertCell(5);oTd.innerHTML = "<a href='#'>delete</a>";oTd.firstChild.onclick = myDelete; //添加删除事件}}</script>删除表格的列(自定义函数)
<script language="javascript">function deleteColumn(oTable,iNum){//自定义删除列函数，即每行删除相应单元格for(var i=0;i<oTable.rows.length;i++)oTable.rows[i].deleteCell(iNum);}window.onload=function(){var oTable = document.getElementById("member");deleteColumn(oTable,2); //使用删除列的自定义函数}</script> 标签： #js获取表格的行 #js点击表格行获取当前行信息
