js 操作 table

最新推荐文章于 2023-03-23 09:24:33 发布

兵_哥哥

最新推荐文章于 2023-03-23 09:24:33 发布

阅读量1k

点赞数

分类专栏：页面js验证

页面js验证专栏收录该内容

21 篇文章

订阅专栏

jsp页面表格布局

    Html代码  
  
 <body onload="show()">  
    <center>  
       <input type="text" value="111" id="mytext">  
       <table border="1" width="60%" id="mytable">  
           <tr>  
               <td id="td1">第一行第一列</td><td id="td2">第一行第二列</td>  
           </tr>  
            <tr>  
               <td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td>  
           </tr>  
           <tr>  
               <td>第三行第一列</td><td>第三行第二列</td>  
           </tr>  
       </table>  
    </center>  
  </body>  

js代码

    Javascript代码  
  
 <script type="text/javascript">  
     function show(){  
         // 获取id为 mytext 的普通元素值   
         var mytext = document.getElementById("mytext").value;  
           
         //用标记id的td元素 获取值方法   
         var td1 = document.getElementById("td1").innerHTML;  
   
         //用获取table(通过其id ) 获取指定的行，列   
         var mytable = document.getElementById("mytable").rows[1].cells[2].innerHTML;  
   
         //遍历 table表格   
         var s3 = document.getElementsByTagName("table")[0]; //获取第一个表格   
           
         alert(td1);    //第一行第一列   
         alert(mytable);  //第二行第三列  
         for(var i=0;i<s3.rows.length;i++){  
             for(var j=0;j<s3.rows[i].cells.length;j++){  
                 alert(s3.rows[i].cells[j].innerHTML);  
             }  
         }  
     }  
 </script>  
 
     Js代码   
     
 var table = document.getElementById(table_id);  
 var rows = table.getElementsByTagName("tr");   
 // 第一种方法  
 var cell = rows[i].getElementsByTagName("td")[1];// 0 is start  
 var entryId = cell.firstChild.nodeValue;  
   
 // 第二种方法  
 var entryId = rows[i].cells[1].innerText;  

 我的表格是动态生成的，所以无法使用 ID 获取到单元格或文本框对象，于是使用浏览器自带的 JavaScript 调试工具调试了半天，终于获取到单元格中的文本框里面的值了。
 
   1 //获取单元格的子节点，也就是文本框对象，并对其取值
2 varmun = document.getElementById("tab").rows[0].cells[3].childNodes[0].value; 
  
 如果直接获取单元格中的值可以这样写：
 
   1 var num = document.getElementById("tab").rows[0].cells[3].innerText;