How to get the text value of a first column by button on click javascript

Question

I'm a newbie html and javascript. I have clear code below

HTML

<tr>
    <td>1</td>
    <td>Info1</td>
    <td><input class="btn" value="Show" onclick="showTdSecond();" type="button"></td>
</tr>
<tr>
    <td>2</td>
    <td>Info2</td>
    <td><input class="btn" value="Show" onclick="showTdSecond();" type="button"></td>
</tr>
<tr>
    <td>3</td>
    <td>Info3</td>
    <td><input class="btn" value="Show" onclick="showTdSecond();" type="button"></td>
</tr>

Javascript

<script type="text/javascript">
function showTdSecond() {

}

I want click a button I will get a text value of second. Example : Info1, Info2, Info3. Please help me,

Thanks, but your way is not automatical, i choose an answer of "Rajaprabhu Aravindasamy" — meebovn
– meebovn, Commented May 11, 2016 at 7:16

Rajaprabhu Aravindasamy · Accepted Answer · 2016-05-11 04:56:52Z

4

First of all you have to pass the this value to the inline event handler,

<input class="btn" value="Show" onclick="showTdSecond(this);" type="button">

Then use the this context and traverse to the relevant element and collect its text,

function showTdSecond(_this) {
 alert(_this.parentNode.previousElementSibling.textContent);
}

Here you can read more about previousElementSibling.

DEMO

answered May 11, 2016 at 4:56

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RobG Over a year ago

You can put runnable snippets in your answer so no need for a link to another site.

RobG · Accepted Answer · 2016-05-11 05:16:25Z

0

You can use the cellIndex property of the cell with the parent row to get the previous cell:

function showTdSecond(el) {
  var cell = el.parentNode;
  alert(cell.parentNode.cells[cell.cellIndex - 1].textContent);
}

<table>
  <tr>
    <td>1</td>
    <td>Info1</td>
    <td><input class="btn" value="Show" onclick="showTdSecond(this);" type="button"></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Info2</td>
    <td><input class="btn" value="Show" onclick="showTdSecond(this);" type="button"></td>
  </tr>
  <tr>
    <td>3</td>
    <td>Info3</td>
    <td><input class="btn" value="Show" onclick="showTdSecond(this);" type="button"></td>
  </tr>
</table>

answered May 11, 2016 at 5:16

RobG

148k32 gold badges180 silver badges216 bronze badges

1 Comment

meebovn Over a year ago

Good answer ! Give me more knowledge :) Thanks

Collectives™ on Stack Overflow

How to get the text value of a first column by button on click javascript

2 Answers 2

DEMO

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related