• JavaScript遍历table


    JavaScript遍历table


    1、说明

         遍历表格中的某行某列,并打印其值


    2、实现源代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript遍历table</title>
    <style type="text/css">
        tr td,tr th{
    		border:#CCC 1px solid;
    	}
    </style>
    <script type="text/javascript">
         /**
    	  * JavaScript遍历table
    	  */
         function eachTableRow()
    	 {
    		 //获取table序号
    		 var tab=document.getElementById("tab");
    		 //获取行数
         	 var rows=tab.rows;
    		 //遍历行
         	 for(var i=1;i<rows.length;i++)
         	{
    			//遍历表格列
            	for(var j=0;j<rows[i].cells.length;j++)
            	{
    				//打印某行某列的值
           			alert("第"+(i+1)+"行,第"+(j+1)+"列的值是:"+rows[i].cells[j].innerHTML);
            	}
         	}
    	 }
    </script>
    </head>
    
    <body>
       <table id="tab" cellpadding="0" cellspacing="0" style="50%; text-align:center; border:#CCC 1px solid;">
           <tr style="border:#CCC 1px solid;">
             <th>学号</th>
             <th>姓名</th>
             <th>年龄</th>
             <th>性别</th>
           </tr>
           <tr>
             <td>2014010101</td>
             <td>张思思</td>
             <td>20</td>
             <td>女</td>
           </tr>
           <tr>
             <td>2014010102</td>
             <td>立三</td>
             <td>21</td>
             <td>男</td>
           </tr>
           <tr>
             <td>2014010103</td>
             <td>王玉</td>
             <td>22</td>
             <td>女</td>
           </tr>
           <tr>
             <td>2014010104</td>
             <td>朱莉</td>
             <td>23</td>
             <td>男</td>
           </tr>
       </table>
       <input type="button" value="遍历" onclick="eachTableRow()"/>
    </body>
    </html>


    3、实现结果

    (1)初始化时



    (2)单击“遍历”



    (3)再次单击“遍历”


  • 相关阅读:
    WM_CHAR消息分析
    数据库OleDbConnection对象参考
    数据库使用Command对象进行数据库查询
    如何在VBNET中使用调试输出类Debug和Trace
    数据库与数据库连接
    数据库ADONETOleDbDataReader对象参考
    VBNET运行时处理对象事件(AddHandler和RemoveHandler)
    防火墙分类简述(班门弄斧了)
    杀毒防护类软件的组合转帖
    数据库ADONETOleDbCommand对象参考
  • 原文地址:https://www.cnblogs.com/claireyuancy/p/6903154.html
Copyright © 2020-2023  润新知