您的位置：首页 > Web前端 > JavaScript

js 操作 table

2015-07-27 22:24 731 查看

jsp页面表格布局

Html代码

<body onload="show()">

<center>

<input type="text" value="111" id="mytext">

<table border="1" width="60%" id="mytable">

<tr>

<td id="td1">第一行第一列</td><td id="td2">第一行第二列</td>

</tr>

<tr>

<td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td>

</tr>

<tr>

<td>第三行第一列</td><td>第三行第二列</td>

</tr>

</table>

</center>

</body>

js代码

Javascript代码

<script type="text/javascript">

function show(){

// 获取id为 mytext 的普通元素值

var mytext = document.getElementById("mytext").value;

//用标记id的td元素获取值方法

var td1 = document.getElementById("td1").innerHTML;

//用获取table(通过其id ) 获取指定的行，列

var mytable = document.getElementById("mytable").rows[1].cells[2].innerHTML;

//遍历 table表格

var s3 = document.getElementsByTagName("table")[0]; //获取第一个表格

alert(td1); //第一行第一列

alert(mytable); //第二行第三列

for(var i=0;i<s3.rows.length;i++){

for(var j=0;j<s3.rows[i].cells.length;j++){

alert(s3.rows[i].cells[j].innerHTML);

}

}

}

</script>

Js代码

var table = document.getElementById(table_id);

var rows = table.getElementsByTagName("tr");

// 第一种方法

var cell = rows[i].getElementsByTagName("td")[1];// 0 is start

var entryId = cell.firstChild.nodeValue;

// 第二种方法

var entryId = rows[i].cells[1].innerText;

我的表格是动态生成的，所以无法使用 ID 获取到单元格或文本框对象，于是使用浏览器自带的 JavaScript 调试工具调试了半天，终于获取到单元格中的文本框里面的值了。

1 //获取单元格的子节点，也就是文本框对象，并对其取值
2 varmun = document.getElementById("tab").rows[0].cells[3].childNodes[0].value;

如果直接获取单元格中的值可以这样写：

1 var num = document.getElementById("tab").rows[0].cells[3].innerText;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航