資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 jQuery 統計行數和列數
概述
可以使用 jQuery 中的“length”屬性來計算表格中行數和列數。為了實現這個解決方案，我們將針對表格的 HTML <th> 元素來統計列數，為了統計表格中的行數，我們將針對表格的 <tr> 標籤。我們也可以以父元素到子元素的形式來定位元素，例如“table tr th”，這將定位表格的頭部以計算列數。
語法
用於統計表格中行數和列數的語法如下：
$(selector).length;
演算法
步驟 1 − 將 jQuery 內容分發網路 (CDN) 連結新增到我們的 HTML 基本程式碼中。
步驟 2 − 使用 <table> 標籤建立一個 HTML 表格，並使用 <thead>、<th> 標籤插入表格頭的列。要將資料插入表格並插入一行，請使用 <tr> 標籤，然後使用 <td> 標籤插入資料。
<table>
<thead>
<th></th>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
步驟 3 − 建立兩個按鈕，第一個按鈕計算行數，另一個按鈕計算列數，類名分別為“row”和“col”。
步驟 4 − 在指令碼標籤內建立 click() 事件，該事件將選擇“row”作為選擇器。現在使用 length 屬性並選擇“tr”標籤來統計行數。
步驟 5 − 在指令碼標籤內為列建立 click() 事件，該事件將選擇“col”作為選擇器。現在使用 length 屬性並選擇“th”標籤來統計列數。
步驟 6 − 當任何一個按鈕被點選時，它分別在相應的按鈕上顯示行數和列數。
示例
在這個示例中，我們建立了一個員工記錄的表格，包含四列：序號、姓名、職位、薪資。資料使用 <td> 標籤插入，該標籤確定表格資料。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Count number of Rows and Column in Table</title>
</head>
<body>
<h3>Check Numbers of Row and Column</h3>
<table class="table_id" border >
<thead>
<tr>
<th>S.no.</th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andrew</td>
<td>Developer</td>
<td>₹0.00</td>
</tr>
<tr>
<td>2</td>
<td>Dev</td>
<td>Network Eng.</td>
<td>₹0.00</td>
</tr>
<tr>
<td>3</td>
<td>Jack</td>
<td>HR</td>
<td>₹0.00</td>
</tr>
<tr>
<td>4</td>
<td>William</td>
<td>Sales Exc.</td>
<td>₹0.00</td>
</tr>
</tbody>
</table>
<button class="row" style="padding: 0.4rem;margin-top: 1rem;">Check Row <span id="nr"></span></button>
<button class="col" style="padding: 0.4rem;">Check Column <span id="nc"></span></button>
<script>
$('.row').click(()=>{
$("#nr").css("background-color","red");
$("#nr").css("color","white");
$("#nr").css("padding","0.3rem 0.5rem");
$("#nr").css("margin-left","0.4rem");
$("#nr").css("border-radius","50%");
$('#nr').text($('tr').length);
})
$('.col').click(()=>{
$("#nc").css("background-color","red");
$("#nc").css("color","white");
$("#nc").css("padding","0.3rem 0.5rem");
$("#nc").css("margin-left","0.4rem");
$("#nc").css("border-radius","50%");
$('#nc').text($('th').length);
})
</script>
</body>
</html>
下圖顯示了上述示例的輸出。在上述示例中，當點選“檢查行”按鈕時，將觸發帶有“row”選擇器的 click() 事件，並顯示輸出為紅色彈出數字。當點選“檢查列”按鈕時，它將呼叫包含列選擇器的 click 事件，並在按鈕中顯示輸出。
結論
jQuery 的 text() 方法有助於在按鈕中插入行數和列數的值。行和列的計算在我們必須建立一個易於操作的資料庫時非常有用。它的另一個應用是，假設我們想顯示錶格中的總條目數，那麼在這種情況下，我們可以使用此 length 屬性來顯示結果。
3K+ 閱讀量
