CSDNRGY
2015-12-21 05:28
采纳率: 99.3%
浏览 8.2k
已采纳

如何用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]获取到的是表格主体第一行第一个单元格

    已采纳该答案
    评论
    解决 无用 1
    打赏 举报
  • 飞荷扬菊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>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题