獲取table表格有多少列程式碼例項

antzone發表於2017-04-09

本章節通過程式碼例項介紹一下如何獲取table表格有多少列。

原理非常的簡單，就是獲取一個tr中有多少td單元格，即是表格有多少列。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body, table{font-size:12px;}
table{
  table-layout:fixed;
  empty-cells:show;
  border-collapse: collapse;
  margin:0 auto;
}
td{height:30px;}
h1, h2, h3{
  font-size:12px;
  margin:0;
  padding:0;
}
.table{
  border:1px solid #cad9ea;
  color:#666;
}
.table th{
  background-repeat:repeat-x;
  height:30px;
}
.table td, .table th{
  border:1px solid #cad9ea;
  padding:0 1em 0;
}
.table tr.alter{
  background-color:#f5fafe;
}
#show {
  width:200px;
  height:50px;
  margin:0px auto;
  text-align:center;
  color:red;
  font-size:16px;
}
</style>
<script>
window.onload = function () {
  var otable = document.getElementById("antzone");
  var odiv = document.getElementById("show");
  var num = otable.getElementsByTagName("tr")[1].getElementsByTagName("td").length;
  odiv.innerHTML = num;
}
</script>
</head>
<body>
<div id="show"></div>
<table id="antzone" width="90%" class="table">
  <tr>
    <th>學號</th>
    <th>姓名</th>
    <th>平時</th>
    <th>期中</th>
    <th>實驗（踐）</th>
    <th>其它</th>
    <th>期末</th>
    <th>總評</th>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr class="alter">
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
</table>
</body>
</html>

上面的程式碼實現了我們的要求，程式碼比較簡單，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

（2）.innerHTML可以參閱js innerHTML一章節。

相關文章