Home > Article > Web Front-end > How to determine whether tr in table is selected in jquery
How to determine whether tr in table is selected in jquery
- WBOYOriginal
- 2021-12-01 12:06:392702browse
Method: 1. Use the click() method to bind a click event to the tr element and specify an event processing function; 2. Use the "$(selector).index(element)" statement in the event processing function to determine Just specify whether the element is selected and output the position of the selected element.
The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.
How does jquery determine whether the tr element in the table is selected
We can use the click() method and index() method to determine whether the tr element is selected Selected.
The click() method indicates that when an element is clicked, a click event will occur. A click occurs when the mouse pointer rests over an element, and then the left mouse button is pressed and released. The click() method triggers the click event, or specifies a function to run when the click event occurs.
index() method returns the index position of the specified element relative to other specified elements.
The example is as follows:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(function(){
var myRows = $('table tr').click(function(){
alert('Row #' +myRows.index(this));
});
});
</script>
</head>
<body>
<table width="300" border="1" cellspacing="1" cellpadding="2">
<tr>
<td width="150">0-1</td>
<td width="150">0-2</td>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
</tr>
</table>
</body>
</html>Output result:
When the first row is selected, the output result:
Recommended related video tutorials: jQuery video tutorial
The above is the detailed content of How to determine whether tr in table is selected in jquery. For more information, please follow other related articles on the PHP Chinese website!