JavaScript遍历table表格中的某行某列并打印其值

JavaScript遍历table

1、说明

遍历表格中的某行某列，并打印其值

2、实现源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript遍历table</title>
<style type="text/css">
tr td,tr th{
border:#CCC 1px solid;
}
</style>
<script type="text/javascript">
/**
* JavaScript遍历table
*/
function eachTableRow()
{
//获取table序号
var tab=document.getElementById("tab");
//获取行数
var rows=tab.rows;
//遍历行
for(var i=1;i<rows.length;i++)
{
//遍历表格列
for(var j=0;j<rows[i].cells.length;j++)
{
//打印某行某列的值
alert("第"+(i+1)+"行，第"+(j+1)+"列的值是:"+rows[i].cells[j].innerHTML);
}
}
}
</script>
</head> 

<body>
<table id="tab" cellpadding="0" cellspacing="0" style="width:50%; text-align:center; border:#CCC 1px solid;">
<tr style="border:#CCC 1px solid;">
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>2014010101</td>
<td>张思思</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>2014010102</td>
<td>立三</td>
<td>21</td>
<td>男</td>
</tr>
<tr>
<td>2014010103</td>
<td>王玉</td>
<td>22</td>
<td>女</td>
</tr>
<tr>
<td>2014010104</td>
<td>朱莉</td>
<td>23</td>
<td>男</td>
</tr>
</table>
<input type="button" value="遍历" onclick="eachTableRow()"/>
</body>
</html>

3、实现结果

（1）初始化时

（2）单击“遍历”

（3）再次单击“遍历”

赞 (0)

相关推荐

  • JS与jQuery遍历Table所有单元格内容的方法

    本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法.分享给大家供大家参考,具体如下: 用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { /

  • Javascript遍历table中的元素示例代码

    例如: <table id=tb> <tr><th> </th><th> </th><th> </th><th> </th></tr> <tr><td> </td><td> </td><td> </td><td> </td></tr> <tr>&

  • JS使用for循环遍历Table的所有单元格内容

    JS遍历Table的所有单元格内容思路是遍历Table的所有Row,遍历Row中的每一列,获取Table中单元格的内容 function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { //遍历Table的所有Row for (var j

  • Javascript遍历Html Table示例(包括内容和属性值)

    1: 遍历并输出Table中值 <table id="tb"> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> function f() { var t=document.getElementById("tb").childNodes.item(0); for(var i=0;i< t.c

  • 用js遍历 table的脚本

    var tableObj = document.getElementById("tableName"); var str = ""; for(var i=0;i<tableObj.rows.length;i++) {    for(varj=0;j<tableObj.rows[i].cells.length;j++)    {       //str += tableObj.rows[i].cells[j].innerHTML+"   &quo

  • js实现遍历含有input的table实例

    本文实例讲述了js实现遍历含有input的table.分享给大家供大家参考,具体如下: table 如下: <table id="groupTable" class="tblist_black"> <% DataTable firstGroupTable = ViewState["firstGroupTable"] as DataTable; if (firstGroupTable != null) { for (int i =

  • JavaScript遍历table表格中的某行某列并打印其值

    JavaScript遍历table表格中的某行某列并打印其值

    JavaScript遍历table 1.说明 遍历表格中的某行某列,并打印其值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • python 利用openpyxl读取Excel表格中指定的行或列教程

    python 利用openpyxl读取Excel表格中指定的行或列教程

    Worksheet 对象的 rows 属性和 columns 属性得到的是一 Generator 对象,不能用中括号取索引. 可先用列表推导式生成包含每一列中所有单元格的元组的列表,在对列表取索引. Worksheet 的 rows 属性亦可用相同的方法处理. 补充:python之表格数据读取 python 操作excel主要用到xlrd,xlwt这两个库,xlrd,是读取excel表,xlwt是写入表格 1.打开表格 table = xlrd.open("path_to_your_excel&

  • bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法

    bootstrap-table下表格中增加操作的btn,如果是下拉菜单,那么在每一页最后一行点击下拉菜单,会出现滚动条,解决方法: 修改这个类,但是这个类改了会有点影响toolbar的显示,不过问题不大,加个margin就可以了 .fixed-table-body{ overflow:visible !important; } 以上所述是小编给大家介绍的bootstrap table 表格中增加下拉菜单末行出现滚动条解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的

  • javascript操作向表格中动态加载数据

    本文实例为大家分享了javascript实现向表格中动态加载数据的具体代码,供大家参考,具体内容如下 首先在HTML中编写表格信息 <table width="500px" border="1"> //表格头部信息 <thead> <tr> <th>编号</th> <th>姓名</th> <th>身份</th> <th>操作</th>

  • javascript清空table表格的方法

    本文实例讲述了javascript清空table表格的方法.分享给大家供大家参考.具体如下: 1. 通常方法 循环table的rows,然后一个一个删除. 这个方法是通常的方法,可行,但是效率不好. 2. 另一个方法 var artTable = document.getElementById("artical_table"); console.debug(artTable.getElementsByTagName("thead")[0]); var artBody

  • javascript实现table表格隔行变色的方法

    本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table间隔色</title

  • layui问题之模拟table表格中的选中按钮选中事件的方法

    一.问题 不操作页面,实现table表格中的checkbox选中功能 二.经过 刚开始的思路: 1.通过table的id,找到table渲染时生成的div,即table的下一个兄弟节点div.layui-table-view 2.由于checkbox是固定列,再通过第一步,找到div.layui-table-view的子元素.layui-table-fixed 3.紧接着,找出table的第一行的第一个td里面的input,即tr[data-index="0"] td input(注:

  • JavaScript遍历查找数组中最大值与最小值的方法示例

    JavaScript遍历查找数组中最大值与最小值的方法示例

    本文实例讲述了JavaScript遍历查找数组中最大值与最小值的方法.分享给大家供大家参考,具体如下: <script language="javascript"> // 查找数组中最小值 function mathMin(arrs){ var min = arrs[0]; for(var i = 1, ilen = arrs.length; i < ilen; i+=1) { if(arrs[i] < min) { min = arrs[i]; } } ret

  • vuejs+element UI table表格中实现禁用部分复选框的方法

    有时候我们构建这样带一列复选框的表格 然后希望根据条件禁用某个列表项的选择框,可以这样写 HTML: JS: 以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 正则表达式替换table表格中的样式与空标记(保留rowspan与colspan)

    完整测试代码 <script> var str='<p>'; str='<table id="tblSort" cellspacing="0" helvetica="" sans=""><tr id="sdf"><td style="color:red" class="ok" colspan="8&quo

随机推荐