how to get selected row value in html table using jquery?

how to get selected row value in html table using jquery: use $(this) method. here example for how to get selected (checked) CheckBox Row (Cell) values of HTML Table using jQuery.

how to get selected row value in html table using jquery

how to get values of columns for a selected row through jQuery: Get the table cell TD values on click using jquery, How to read the table cell value which contains HTML element ie( div,span, textbox ) using jquery.

function cnt_dt(){
    var id = $(this).closest("tr").find('td:eq(2)').text();
    alert(id);
}

how to get values of columns for a selected row through jQuery

Example : 1
Get selected (checked) CheckBox Row values of HTML Table using jQuery

<table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
    <tr>
        <th> </th>
        <th style="width:80px">Member Id</th>
        <th style="width:120px">Name</th>
        <th style="width:120px">Address</th>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>1</td>
        <td>Krishna Dave</td>
        <td>Kalavad</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>2</td>
        <td>Sundar Lal</td>
        <td>Surat</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>3</td>
        <td>Samju dhahi</td>
        <td>Krishna Park</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>4</td>
        <td>Bhavika Pethani</td>
        <td>dhoraji</td>
    </tr>
</table>
<br />
<input id = "btnGet" type="button" value="Get Selected" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        //Assign Click event to Button.
        $("#btnGet").click(function () {
            var display_new_msg = "Id Name                  Location\n";
 
            //Loop through all checked CheckBoxes in GridView.
            $("#Table1 input[type=checkbox]:checked").each(function () {
                var row = $(this).closest("tr")[0];
                display_new_msg += row.cells[1].innerHTML;
                display_new_msg += "   " + row.cells[2].innerHTML;
                display_new_msg += "   " + row.cells[3].innerHTML;
                display_new_msg += "\n";
            });
 
            //Display selected Row data in Alert Box.
            alert(display_new_msg);
            return false;
        });
    });
</script>

Example 2: How to find selected row using jQuery?

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>How to find selected row using jQuery? - www.pakainfo.com</title>
  <link rel="stylesheet" href="style.css" />
  <script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script>
    $(function() {
      $('#memberTable').on('click', 'tbody tr', function(event) {
        $(this).addClass('highlight').siblings().removeClass('highlight');
      });

      $('#btnRowClick').click(function(e) {
        var rows = getHighlightRow();
        if (rows != undefined) {
          alert(rows.attr('id'));
        }
      });

      var getHighlightRow = function() {
        return $('table > tbody > tr.highlight');
      }

    });
  </script>
</head>

<body>
  <div>
    <h2>How to find selected row using jQuery?</h2>
  </div>
  <button id="btnRowClick" class="button">Get Selected Row Ids</button><br/>
  <table id="memberTable" class="row">
    <tbody>
      <tr style="background-color: #F0F8FF;">
        <th><b>Id</b></th>
        <th><b>Name</b></th>
        <th><b>Age</b></th>
      </tr>
      <tr id="row1">
        <td>1</td>
        <td>Anjali</td>
        <td>35</td>
      </tr>
      <tr id="row2">
        <td>2</td>
        <td>Kinjal</td>
        <td>41</td>
      </tr>
      <tr id="row3">
        <td>3</td>
        <td>Kiran</td>
        <td>32</td>
      </tr>
    </tbody>
  </table>
  <a href="http://www.pakainfo.com/" target="_blanck" rel="noopener">click for more detail...</a>
</body>

</html>

td,
th {
  border: 1px solid #999;
  padding: 1.5rem;
}

.row tbody tr.highlight td {
  background-color: #ccc;
}

.button {
  border-top: 1px solid #96d1f8;
  background: #65a9d7;
  background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
  background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
  background: -moz-linear-gradient(top, #3e779d, #65a9d7);
  background: -ms-linear-gradient(top, #3e779d, #65a9d7);
  background: -o-linear-gradient(top, #3e779d, #65a9d7);
  padding: 5px 10px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
  color: white;
  font-size: 23px;
  font-family: Helvetica, Arial, Sans-Serif;
  text-decoration: none;
  vertical-align: middle;
}

.button:hover {
  border-top-color: #28597a;
  background: #28597a;
  color: #ccc;
}

.button:active {
  border-top-color: #1b435e;
  background: #1b435e;
}

Don’t Miss : How To Get Selected Row Value In Html Table Using Jquery?

I hope you get an idea about how to get selected row value in html table using jquery.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.