数据结构
网络
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+ 阅读量
