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
Share Improve this question edited Jul 15, 2017 at 15:44 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Apr 25, 2014 at 12:09 user3182261user3182261 2712 gold badges10 silver badges21 bronze badges 7- 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
Reset to default 3If 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,
td element
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