当前位置:小鱼儿玄机二站 > 操作系统 > 的三种方式全面总结,JS与jQuery遍历Table所有单元

的三种方式全面总结,JS与jQuery遍历Table所有单元

文章作者:操作系统 上传时间:2019-09-03

正文实例呈报了JS与jQuery遍历Table全数单元格内容的艺术。分享给我们供我们参照他事他说加以考察,具体如下:

        /* 第一种,原生的js,先得到table然后得到tr标签,然后遍历td */

JS去遍历Table的富有单元格中的内容,可以用如下JS代码达成:

//     $('#selectIds').val("");
//      var table = document.getElementById("tb_table");//获取第一个表格 
//      var array = table.getElementsByTagName("tr");//所有tr
//      for(var i = 1; i < array.length; i++) {
//       var id = array[i].children;
//       var idtext = id[1].innerHTML;
//       if(i == 1){
//         $('#selectIds').val($('#selectIds').val() + "" + idtext); 
//       }else{
//         $('#selectIds').val($('#selectIds').val() + "," + idtext);
//       }
//       }
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;
}

 
   /* jQuery的写法,获取到tr然后遍历全数的td。注意td获取值是.text(); */

以此艺术的参数是独一标志Table的id,用document对象的获取

//   $('#selectIds').val("");
//   var isFirst = true;
//    $("#tb_table").find("tr").each(function(){
//      var tdArr = $(this).children();
//      var idtext = tdArr.eq(1).text();
//      if(idtext != '人员ID'){
//        if(isFirst){
//        $('#selectIds').val($('#selectIds').val() + "" + idtext); 
//        isFirst = false
//        }else{
//          $('#selectIds').val($('#selectIds').val() + "," + idtext);
//        }
//      console.log("idtext",idtext);
//      }
//    })

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

 
    /* 原生js获取具备行,再猎取每一种单元格 */

1、$("#trID td").text()获得的是三个于是trID之中td的值 再次回到多少个字符串。

//   var table = document.getElementById("tb_table");
//   var rows = table.rows;//获取所有行
//   console.log("lenth",rows.length) //
//   for(var i=1; i < rows.length; i++){
//     var row = rows[i];//获取每一行
//     var id = row.cells[1].innerHTML;//获取具体单元格
//     console.log("id",id)
//   }

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>

$(this).children().eq(1).text()获取的是展现的值

指望本文所述对大家JavaScript程序设计有着扶助。

$(this).children().eq(1).html()获取的是<td></td>之间的具备内容

你大概感兴趣的作品:

  • JS获取表格内钦赐单元格html内容的法子
  • 选用JS轻易完成获取表单数据
  • JS中取得数据库中的值的秘籍
  • js遍历获取表格内数据的艺术(非看不可)

$('.trSelected',grid).find("td").eq(7).text();获取的是选中的某行的内容

设置值:$('.trSelected',grid).find("td").eq(7).text(‘'设置剧情‘')

xxx.innerHTML; 是js里面获取对象的值。

遍历表<table id="gird".....
$("#grid tr").each(function() {
             alert($(this).children().eq(1).text());
 });

用JavaScript来遍历

function load(){
   var tab=document.getElementById("grid");
   var rows=tab.rows;
   alert(rows.length);
   for(var i=0;i<rows.length;i++)
   {
    for(var j=0;j<rows[i].cells.length;j++)
    {
    alert("第"+(i+1)+"行,第"+(j+1)+"列的值是:"+rows[i].cells[j].innerHTML);
    }
   }
  }

以上正是那篇小说的全体内容了,希望本文的剧情对大家的上学可能干活能拉动一定的救助~即便有问号咱们能够留言沟通,感谢大家对剧本之家的支撑!

您也许感兴趣的小说:

  • js中获得table节点各tr及td的内容简短实例
  • JS动态增添Table的TTiggo,TD达成方式
  • js使用for循环与innerHTML获取选中tr下td值
  • jsp跳转getRequestDispatcher()和sendRedirect()的区别
  • JS动态创立Table,Tr,Td并赋值的切实落到实处
  • js遍历td tr等html元素

本文由小鱼儿玄机二站发布于操作系统,转载请注明出处:的三种方式全面总结,JS与jQuery遍历Table所有单元

关键词: