I've got this table with multiple rows. Each row contains 2 text input type fields and a button that runs a function on click.

Basically all of the input fields and buttons have the same id as they are appended with jQuery. Now I only want to pass the values of the text fields that are on the same row as the button. Does anybody now how I can do this?

 $("#teams").find('tbody')
        .append($('<tr>')

            .append($('<td>')
                .text(thisarray.matchId)
                .prop('id','matchId')
            )

            .append($('<td>')
                .text(thisarray.homeTeam)
            )
            .append($('<td>')
                .text(thisarray.awayTeam)
            )
            .append($('<td>')
                .append($('<input>')
                    .prop('type', 'text')
                    .prop('id', 'scoreHome')
                )
            )
            .append($('<td>')
                .append($('<input>')
                    .prop('type', 'text')
                    .prop('id', 'scoreAway')
                )
            )
            .append($('<td>')
                .append($('<input type="button" value="Ok" id="sendGoals"/>')
                )
            )
        );

This is the JS in one file.

function sendAllScores(){
//get scores
var scoreHomeTeam = $('#scoreHome').closest('tr').val();
var scoreAwayTeam = $('#scoreAway').closest('tr').val();
var matchId = $('#matchId').closest('tr').val();

And this from the other file

I've got this table with multiple rows. Each row contains 2 text input type fields and a button that runs a function on click.

Basically all of the input fields and buttons have the same id as they are appended with jQuery. Now I only want to pass the values of the text fields that are on the same row as the button. Does anybody now how I can do this?

 $("#teams").find('tbody')
        .append($('<tr>')

            .append($('<td>')
                .text(thisarray.matchId)
                .prop('id','matchId')
            )

            .append($('<td>')
                .text(thisarray.homeTeam)
            )
            .append($('<td>')
                .text(thisarray.awayTeam)
            )
            .append($('<td>')
                .append($('<input>')
                    .prop('type', 'text')
                    .prop('id', 'scoreHome')
                )
            )
            .append($('<td>')
                .append($('<input>')
                    .prop('type', 'text')
                    .prop('id', 'scoreAway')
                )
            )
            .append($('<td>')
                .append($('<input type="button" value="Ok" id="sendGoals"/>')
                )
            )
        );

This is the JS in one file.

function sendAllScores(){
//get scores
var scoreHomeTeam = $('#scoreHome').closest('tr').val();
var scoreAwayTeam = $('#scoreAway').closest('tr').val();
var matchId = $('#matchId').closest('tr').val();

And this from the other file

• javascript
• jquery
• function
• html-table

• You should never use same ID among HTML elements.. – Afzaal Ahmad Zeeshan Commented Apr 25, 2014 at 12:11
• we wont speculate.! please show some code.. – Rajaprabhu Aravindasamy Commented Apr 25, 2014 at 12:11
• 1 Please post your code you are having issues with, acpanied by a jsFiddle (or similar), if required, to demonstrate the issue. – Nope Commented Apr 25, 2014 at 12:11
• 1 same id as they are appended with jquery IDs must be unique – Satpal Commented Apr 25, 2014 at 12:12
• you should show your effort first – muneebShabbir Commented Apr 25, 2014 at 12:13

3 Answers 3

If they're in same row. Then they must be inside the DOM like

<tr>
  <td><input type="text" /></td>
  <td><input type="button" /></td>
</tr>

If so, then the jQuery for that would be to go the parent row, and get the input value from it as

$('input[type=button]').click(function () {
  var val = $(this).parent().parent().find('input[type=text]').val();
  alert(val);
});

Note that there would be 2 parents,

1. td element

2. tr element.

Then you go to the child element of the input type and get its value.

heres a small example for you: Fiddle

populate this:

<table id="theTable"></table>

using this:

$(function(){
    var _rows=10;
    var _body="";
    for(i =0;i<_rows;i++){
        _body+="<tr>"+
            "<td><input type='text' class='text1'></input></td>"+
            "<td><input type='text' class='text2'></input></td>"+
            "<td><input type='button' class='theButton' value='Click Here'></input></td>"+
            "</tr>";
    }
    $("#theTable").html(_body);
    $(".theButton").on("click",function(){
        alert("Text1: "+$(".text1",$(this).parent().parent()).val()+", Text2: "+$(".text2",$(this).parent().parent()).val());
    });
 })

There's no need for id or something else. You can get em with indexes

$("table tr td input[type=button]").on("click", function(){
  var value1 = $(this).parent().parent().find("input:eq(0)").val();
  var value2 = $(this).parent().parent().find("input:eq(1)").val();
  // do your job with value1 and value2
});

FIDDLE