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

WBOY
WBOYOriginal
2021-12-01 12:06:392687browse

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.

How to determine whether tr in table is selected in jquery

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 = $(&#39;table tr&#39;).click(function(){
        alert(&#39;Row #&#39; +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:

How to determine whether tr in table is selected in jquery

When the first row is selected, the output result:

How to determine whether tr in table is selected in jquery

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn