如何使用 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>
下图展示了上述示例的输出。在上述示例中，点击"检查行"按钮时，会触发带有"行"选择器的 click() 事件，并将输出显示为红色弹出数字。点击"检查列"按钮时，会调用带有列选择器的 click 事件，并在按钮中显示输出。
结论
jQuery 的 text() 方法有助于在按钮中插入行数和列数的值。当我们需要创建一个易于操作的数据库时，计算行数和列数非常有用。另一个应用是，假设我们想要显示表格中的总条目数，那么我们可以使用 length 属性来显示结果。
