如何实现 Excel方式二维变色提示的 m*n 表格

最新推荐文章于 2025-08-11 23:19:59 发布

weixin_33897722

最新推荐文章于 2025-08-11 23:19:59 发布

阅读量81

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/BBCaroline/p/4601836.html

本文介绍了一个简单的HTML页面，其中包含一个人员信息表格，并通过JavaScript进行了基本的操作演示，如获取表格行、列及单元格等元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此代码当m≠n 时，有问题。暂时还未解决此问题。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>무제 문서</title>
 6 <style type="text/css">
 7     table{
 8         font:12px arial;
 9         color:#565;
10     }
11     th,td {
12         background-color:#dfc;
13         border-bottom:2px solid #b3de94;
14         border-top:3px solid #ffffff;
15         padding:9px;    
16     }
17     .on {
18         background-color:#363;
19         color:#fff;    
20     }
21 </style>
22 
23 </head>
24 
25 <body>
26 <table>
27     <tr>
28         <th>NO.</th>
29         <th>Name</th>
30         <th>Age</th>
31         <th>Sex</th>
32         <th>Job</th>
33         <th>Country</th>
34     </tr>
35     <tr>
36         <td>1</td>
37         <td>Amy</td>
38         <td>18</td>
39         <td>Girl</td>
40         <td>student</td>
41         <td>USA</td>
42     </tr>
43     <tr>
44         <td>2</td>
45         <td>Timy</td>
46         <td>20</td>
47         <td>Boy</td>
48         <td>student</td>
49         <td>USA</td>
50     </tr>
51     <tr>
52         <td>3</td>
53         <td>Mike</td>
54         <td>25</td>
55         <td>Boy</td>
56         <td>doctor</td>
57         <td>USA</td>
58     </tr>
59     <tr>
60         <td>4</td>
61         <td>Lily</td>
62         <td>20</td>
63         <td>Girl</td>
64         <td>nurse</td>
65         <td>China</td>
66     </tr>
67 </table>
68 <script type="text/javascript">
69     var rows = Array.prototype.slice.call(document.getElementsByTagName('tr'));
70     var cols = Array.prototype.slice.call(document.getElementsByTagName('th'));
71     var cells = Array.prototype.slice.call(document.getElementsByTagName('td'));
72     var cells_Sum = new Array ();
73      cells_Sum =Array.prototype.slice.call(rows[0].childNodes);
74      document.write(cells_Sum.length+'<br/>');
75     /*for(var i=0;i<rows.length;i++){
76         cells_Sum[i]=rows[i].childNodes;
77         document.write(rows[i].childNodes.innerHTML+'<br/>');
78      }*/
79      
80      /*document.write(cells[6].innerHTML+'<br/>');
81      
82      for(var i=0;i<rows.length;i++){
83         for(var j=0;j<cols.length;j++)    {
84             document.write(cells_Sum[i][j].innerHTML+'  ');
85         }
86         document.write('<br/>')
87      }*/
88      
89 </script>
90 </body>
91 </html>