CSDNRGY 2015-12-21 05:28 采纳率: 87%
浏览 8391
已采纳

如何用JavaScript获取table中的tr

 <!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    window.onload=function(){
        var thisTable = document.getElementById("thisTable");
        var tbody = thisTable.children;
        //console.log(tbody);
        var trs = tbody.children;
        for(var i=0;trs.length;i++){
            console.log(trs[i]);
        }
    }
</script>
</head>
<body>
    <table id="thisTable">
        <tr>
            <td>id</td>
            <td>name</td>
            <td>age</td>
        </tr>
        <tr>
            <td>001</td>
            <td>Laowang</td>
            <td>10</td>
        </tr>
        <tr>
            <td>002</td>
            <td>Yan</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>
  • 写回答

3条回答 默认 最新

  • life is wonderful 博客专家认证 2015-12-21 05:37
    关注

    thisTable.tbodies[0].rows[0].cells[0]获取到的是表格主体第一行第一个单元格

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 飞荷扬菊MOL 2015-12-21 05:36
    关注

    $("#thisTable tr")这样获取到table的所有tr,如果要遍历的话，就使用
    $("#thisTable tr").each(function(){
    console.log($(this));//这里的$(this)就是每一个tr
    });

    评论
  • 努力的庸才 2015-12-23 07:23
    关注
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <script language="javascript">// Example: obj = findObj("image1");
 function findObj(theObj, theDoc)
 { 
 var p, i, foundObj; 
 if(!theDoc) theDoc = document; 
 if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) 
 {    theDoc = parent.frames[theObj.substring(p+1)].document;    theObj = 

theObj.substring(0,p); } if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = 

theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++)     foundObj = 

theDoc.forms[i][theObj]; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; 

i++)     foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && 

document.getElementById) foundObj = document.getElementById(theObj);    return foundObj;
 }
 //添加一个参与人填写行
 function AddSignRow(){ //读取最后一行的行号，存放在txtTRLastIndex文本框中 
 var txtTRLastIndex = findObj("txtTRLastIndex",document);
 var rowID = parseInt(txtTRLastIndex.value);

var signFrame = findObj("SignFrame",document);
 //添加行
 var newTR = signFrame.insertRow(signFrame.rows.length);
 newTR.id = "SignItem" + rowID;

//添加列:序号
 var newNameTD=newTR.insertCell(0);
 //添加列内容
 newNameTD.innerHTML = newTR.rowIndex.toString();

//添加列:姓名
 var newNameTD=newTR.insertCell(1);
 //添加列内容
 newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' 

type='text' size='12' />";

//添加列:电子邮箱
 var newEmailTD=newTR.insertCell(2);
 //添加列内容
 newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' 

type='text' size='20' />";

//添加列:电话
 var newTelTD=newTR.insertCell(3);
 //添加列内容
 newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' 

type='text' size='10' />";

//添加列:手机
 var newMobileTD=newTR.insertCell(4);
 //添加列内容
 newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + 

"' type='text' size='12' />";

//添加列:公司名
 var newCompanyTD=newTR.insertCell(5);
 //添加列内容
 newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID 

+ "' type='text' size='20' />";


//添加列:删除按钮
 var newDeleteTD=newTR.insertCell(6);
 //添加列内容
 newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' 

onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";

//将行号推进下一行
 txtTRLastIndex.value = (rowID + 1).toString() ;
 }
 //删除指定行
 function DeleteSignRow(rowid){
 var signFrame = findObj("SignFrame",document);
 var signItem = findObj(rowid,document);

//获取将要删除的行的Index
 var rowIndex = signItem.rowIndex;

//删除指定Index的行
 signFrame.deleteRow(rowIndex);

//重新排列序号，如果没有序号，这一步省略
 for(i=rowIndex;i<signFrame.rows.length;i++){
 signFrame.rows[i].cells[0].innerHTML = i.toString();
 }
 }//清空列表
 function ClearAllSign(){
 if(confirm('确定要清空所有参与人吗？')){
 var signFrame = findObj("SignFrame",document);
 var rowscount = signFrame.rows.length;

//循环删除行,从最后一行往前删除
 for(i=rowscount - 1;i > 0; i--){
    signFrame.deleteRow(i);
 }

//重置最后行号为1
 var txtTRLastIndex = findObj("txtTRLastIndex",document);
 txtTRLastIndex.value = "1";

//预添加一行
 AddSignRow();
 }
 }
 </script>
 </HEAD>

<BODY>
 <div>
 <table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame">
               <tr id="trHeader">
                 <td width="27" bgcolor="#96E0E2">序号</td>
                 <td width="64" bgcolor="#96E0E2">用户姓名</td>
                 <td width="98" bgcolor="#96E0E2">电子邮箱</td>
                 <td width="92" bgcolor="#96E0E2">固定电话</td>
                 <td width="86" bgcolor="#96E0E2">移动手机</td>
                 <td width="153" bgcolor="#96E0E2">公司名称</td>
                 <td width="57" align="center" bgcolor="#96E0E2">&nbsp;</td>
               </tr>
         </table>
    </div>
    <div>
         <input type="button" name="Submit" value="添加参与人" onclick="AddSignRow()" /> 
      <input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />
      <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
    </div>

</BODY>
 </HTML>
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥30 AXI VIP验证多余打印问题
  • ¥15 利用加权最小二乘法求某品牌手机价格指标，已按照总销量计算出权重，各类型号手机价格已知，如何求得价格指标?
  • ¥15 如何自制一个硬件钱包，有兴趣的朋友一起交流
  • ¥15 (关键词-聊天软件)
  • ¥15 求大家看看这个编程的编法没有思路啊
  • ¥20 WSL打开图形化程序子窗口无法点击
  • ¥15 Jupyter Notebook 数学公式不渲染
  • ¥20 ERR_CACHE_MISS 确认重新提交表单
  • ¥20 关于vba使用HTMLfile执行js函数问题
  • ¥60 悬赏求解，通过实时现场摄像头的视频图像识别其他对家打出的麻将牌，识别麻将牌，识别牌墙位置，通过识别对家打出了什么牌