CODEWITHSUNDEEP
javascripthtml
user5863306
user5863306

Reputation:

How to find which row I just clicked in javascript

I can't find the appropriate answer of my problem. I have rows in a table and every row contain one button. How to find the row index of button I just clicked.

<tr>
    <td>111</td>
    <td>aaa</td>
    <td><input type="submit" name="first" id="first" value="First" onclick="countRow(this.id)" /></td>
  </tr>
  <tr>
    <td>222</td>
    <td>bbb</td>
    <td><input type="submit" name="sec" id="second" value="Second" onclick="countRow(this.id)" /></td>
  </tr>
  <tr>
    <td>333</td>
    <td>ccc</td>
    <td><input type="submit" name="third" id="third" value="Third" onclick="countRow(this.id)" /></td>
  </tr>

Upvotes: 1

Views: 2181

Answers (5)

Arnav Yagnik
Arnav Yagnik

Reputation: 792

I assume you want to know the id of the <input> element, 

<td><input type="submit" name="first" id="first" value="First" onclick="countRow(this.id)" /></td>

so Onclick you want to get 'first' for the above element.

so for this modify the element as this -

<td><input type="submit" name="first" id="first" value="First" onclick="countRow()" /></td>

In JavaScript : 

function countRow(){
   // This would give you the id 
    event.target.id
    }

Upvotes: 0

Transformer
Transformer

Reputation: 3760

$('input[type=submit').click(function() {
   var trid = $(this).closest('tr').attr('id'); // table row ID 
   $('div').text(trid);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr id="row1">
    <td>111</td>
    <td>aaa</td>
    <td><input type="submit" name="first" id="first" value="First" /></td>
  </tr>
  <tr id="row2">
    <td>222</td>
    <td>bbb</td>
    <td><input type="submit" name="sec" id="second" value="Second" /></td>
  </tr>
  <tr id="row3">
    <td>333</td>
    <td>ccc</td>
    <td><input type="submit" name="third" id="third" value="Third" /></td>
  </tr>
</table>

<div id="show" style="color: blue">Show the id of the current clicked row: </div>

Upvotes: 1

Yanks
Yanks

Reputation: 173

Use tbody tag and this javascript 

function countRow(id) {
  var table = document.getElementById('dataTable')
  var tbody = table.getElementsByTagName('tbody')[0]
  var rows = tbody.getElementsByTagName('tr');
  for (i = 0; i < rows.length; i++) {
    rows[i].onclick = function() {
      alert(this.rowIndex + 1);
    }
  }
}
<table id="dataTable">
  <tbody>
    <tr>
      <td>111</td>
      <td>aaa</td>
      <td>
        <input type="submit" name="first" id="first" value="First" onclick="countRow(this.id)" />
      </td>
    </tr>
    <tr>
      <td>222</td>
      <td>bbb</td>
      <td>
        <input type="submit" name="sec" id="second" value="Second" onclick="countRow(this.id)" />
      </td>
    </tr>
    <tr>
      <td>333</td>
      <td>ccc</td>
      <td>
        <input type="submit" name="third" id="third" value="Third" onclick="countRow(this.id)" />
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 3

Rayon
Rayon

Reputation: 36609

Use indexOf prototype of array if we cast nodeList to array.

Pass argument as this(current element) instead of this.id

Try this:

function countRow(elem) {
  var trElement = elem.parentElement.parentElement;
  var tr = document.getElementsByTagName('tr');
  tr = Array.prototype.slice.call(tr);
  alert(tr.indexOf(trElement));
}
<table>
  <tr>
    <td>111</td>
    <td>aaa</td>
    <td>
      <input type="submit" name="first" id="first" value="First" onclick="countRow(this)" />
    </td>
  </tr>
  <tr>
    <td>222</td>
    <td>bbb</td>
    <td>
      <input type="submit" name="sec" id="second" value="Second" onclick="countRow(this)" />
    </td>
  </tr>
  <tr>
    <td>333</td>
    <td>ccc</td>
    <td>
      <input type="submit" name="third" id="third" value="Third" onclick="countRow(this)" />
    </td>
  </tr>

</table>

Upvotes: 1

Kapil
Kapil

Reputation: 1141

Try to use this for table cell selector and action for selected cell

http://www.redips.net/javascript/table-td-merge-split/

Upvotes: 0

Related Questions