从特定列获取值

Question

I'm trying to alert message on click each column. I have a table in which three row and four column, now I want alert message with next column value on third column click of each table. I have tried this but all column get value not a particular column. my problem is this is invoke in every column click but I want alert message only when third column click of each row.

HTML

<table id='myTable'>
<tr><td>R1C1</td><td>R1C2</td><td>R1C3</td><td>R1C4</td></tr>
<tr><td>R2C1</td><td>R2C2</td><td>R2C3</td><td>R2C4</td></tr>
<tr><td>R3C1</td><td>R3C2</td><td>R3C3</td><td>R3C4</td></tr>
</table>

JS

$("#myTable tr").bind("click", function () {
     alert($(this).children("td").eq(3).html());
});

Demo Here

Answer 1

please try this code

 $(document).ready(function () {

            $('#myTable tr').each(function (Mindex, Mval) {
                $(Mval).find('td:eq(2)').click(function () {
                    alert($(Mval).find('td:eq(3)').html());
                });
            });

Answer 2

$("#myTable tr td:nth-child(3)").click(function () {
     alert($(this).next().html());
});

Answer 3

Try this

 $('table#myTable tr td:nth-child(3)').on('click', function() {
            alert($(this).next().html());
        });

Check Here

Answer 4

Try this:

 $('#myTable').children('tr').children('td').eq(3).on('click', function() {
     alert($(this).next().html());
 });

The above function makes sure that you are calling the direct children elements but not any nested other same elements. Solves future regressions.

Answer 5

If your table is going to stay the same size there are answers that already work. If your table is going to grow I would recommend doing some event delegation. It will dramatically speed up the page if there are going to be a large number of event listeners.

$('#myTable').on('click', 'td:nth-child(3)', function(){
    alert($(this).text());
});

See this jsfiddle , and this jquery documentation .

Answer 6

below code will find and set the desired column value

$('#myTable tr:gt(0)').each(function(){
       // console.log($('td:eq(3)', $(this)).html());
        alert($('td:eq(3)', $(this)).html());
        $('#myTable').find('tr:gt(0)').find('td:eq(3)').html("hello");
    });

Answer 7

Try this:

var thirdEle = $("#myTable tr td:nth-child(3)");
thirdEle.bind("click", function () {
    alert($(this).html());
});