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

2024-09-28 02:45:13

本文实例讲述了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++) { //遍历Table的所有Row
  for (var j = 0; j < tableObj.rows[i].cells.length; j++) { //遍历Row中的每一列
   tableInfo += tableObj.rows[i].cells[j].innerText; //获取Table中单元格的内容
   tableInfo += " ";
  }
  tableInfo += "\n";
 }
 return tableInfo;
}

这个方法的参数是唯一标识Table的id，用document对象的获取

jQuery 遍历Table中tr中的td中的内容：

1、$("#trID td").text()得到的是一个所以trID之中td的值返回一个字符串。

2、$("#trID").children 得到一个trID下的所有td，然后遍历$("#trID").children使用.eq(index).text()得到td中的值;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/>
<title>无标题文档</title>
<scriptlanguage="javascript"src="jquery-1.6.2.min.js"type="text/javascript"></script>
<scriptlanguage="javascript">
$(document).ready(function() {
  $("#table a").each(function (){
  this.onclick = function(){
   var thisObj = this.parentNode.parentNode;
   var a = $(thisObj).children();
   var arr = new Array();
   var laber = $("#xiugai label");
   for(var i=0;i<a.length;i++){
    arr[arr.length] = a.eq(i).text();
   }
   for(var i=0;i<laber.length;i++){
    laber.eq(i).text(arr[i]);
   }
   $("#table").hide();
   $("#xiugai").show(2000)
  }
 });
});
function fanhui(){
 $("#table").show(2000);
 $("#xiugai").hide(2000);
}
</script>
</head>
<body>
<divid ="table">
<tablewidth="470"border="0"cellspacing="0"cellpadding="0">
 <trid="tr1">
 <td>id</td>
 <td>名字</td>
 <td>密码</td>
 <td>操作</td>
 </tr>
 <trid="tr2">
 <td>1</td>
 <td>张三</td>
 <td>12</td>
 <td><ahref="#">删除</a></td>
 </tr>
 <trid="tr3">
 <td>2</td>
 <td>李四</td>
 <td>34</td>
 <td><ahref="#">删除</a></td>
 </tr>
 <trid="tr4">
 <td>3</td>
 <td>王五</td>
 <td>56</td>
 <td><ahref="#">删除</a></td>
 </tr>
 <trid="tr5">
 <td>4</td>
 <td>六子</td>
 <td>78</td>
 <td><ahref="#">删除</a></td>
 </tr>
</table>
</div>
<divid ="xiugai"style="display:none; background-color:#FFC; height:360px; width:260px">
 ID：<label></label><br/>
 姓名:<label></label><br/>
 密码:<label></label><br/>
 <buttononclick="fanhui()">返回</button>
</div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

利用JS轻松实现获取表单数据

接触过Angularjs的都知道,ng支持双向绑定,我们可以轻轻松松的通过ngModel将我们的值绑定到界面,当修改了值提交表单的时候不需要再重新通过ID去重新抓取输入框信息了.那对于我们开发前台网站,不用ng一类的MVVM框架,只引用了Jquery,那么在处理表单的时候该怎么做呢. 一. 原始做法 <div id="form"> <select id='select1'> <option value="">--请选择--<
JS中获取数据库中的值的方法

实施过程如下: 1.引用Ajax.dll 2.在App_Code写具体的方法,最好单独建立一个类文件,然后写具体方法. 复制代码代码如下: public class AjaxMethod www.jb51.net{ public AjaxMethod() { // //TODO: 在此处添加构造函数逻辑 // } [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirem
js遍历获取表格内数据的方法(必看)

本文将介绍如何使用js获取表格内某一单元格的内容,表格由table,tr,td等html标记组成.table表示表格,tr表示行,td表示行中列. 1.一般的表格结构如下 <table> <tr> <td>id</td> <td>name</td> </tr> <tr> <td>1</td> <td>fdipzone</td> </tr> <tr
JS获取表格内指定单元格html内容的方法

本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组,然后定位指定的单元格,通过单元格的innerHTML属性获得单元格的html内容 <!DOCTYPE html> <html> <head> <script> function cell() { var x=document.getElementById('myTable').rows[0].cells;
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++) { /
使用jQuery 操作table 完成单元格合并的实例

比较表格的内容.判断是否合并单元格: tr = $("#printPage tr").length;// 获取当前表格中tr的个数 var mark = 0; //要合并的单元格数 var index = 0; //起始行数 /* * 要合并单元格,需要存储两个参数, * 1,开始合并的单元格的第一行的行数, * 2.要合并的单元格的个数 **/ console.log(tr); //判断若只有一行数据,则不做调整 if(tr <= 2){ }else{ //var i=1 比
JS实现控制表格内指定单元格内容对齐的方法

本文实例讲述了JS实现控制表格内指定单元格内容对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制表格单元格的内容向右对齐 <!DOCTYPE html> <html> <head> <script> function alignCell() { document.getElementById('td1').align="right"; } </script> </head> <body> &l
JavaScript动态改变表格单元格内容的方法

本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格内容 <!DOCTYPE html> <html> <head> <script> function changeContent() { var x=document.getElementById('myTable').rows[0].cells; x[0].i
C#中datagridview使用tooltip控件显示单元格内容的方法

本文实例讲述了C#中datagridview使用tooltip控件显示单元格内容的方法.分享给大家供大家参考,具体如下: 代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;
jQuery实现HTML表格单元格的合并功能

本文实例讲述了jQuery实现HTML表格单元格合并的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 合并前: 合并后: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.
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
jQuery获取table行数并输出单元格内容的实现方法

本文实例讲述了jQuery获取table行数并输出单元格内容.分享给大家供大家参考,具体如下: js部分: <script language="javascript" type="text/javascript"> $(function() { $("#txtInput").attr("value", "90"); var v_temp = $("#lblMessage").
合并table相同单元格的jquery插件分享(很精简)

效果如下原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ShangHai ggggg ccccc ShangHaiCity GuangZhou ttttt eeeee GuangZ
基于jquery的合并table相同单元格的插件(精简版)

效果如下原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ShangHai ggggg ccccc ShangHaiCity GuangZhou ttttt eeeee GuangZ

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

相关推荐

随机推荐