I have a search button on body. On this search button click i am calling the button click event as:
$(document).ready(function() {
//On Search Button click, this function creates dynamic tables.
$("#searchBtn").click(function() {
var numArray = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10");
var alphaArray = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j");
var table = $('<table></table>').addClass('table');
for (i = 0; i < numArray.length; i++) {
var tbody = $('<tbody></tbody>');
var row = $('<tr></tr>');
var num = numArray[i];
var alpha = alphaArray[i];
row.on("click", function() {
selectRow(num, alpha);
});
var cell1 = $('<td></td>').addClass('spacer').text(numArray[i]);
var cell2 = $('<td></td>');
var button;
if (alpha[i] == "b") {
button = $('<button type="button">').addClass('btn btn-primary').text('BOY');
} else if (alpha[i] == "g") {
button = $('<button type="button">').addClass('btn btn-success').text('GIRL');
} else if (alpha[i] == "h") {
button = $('<button type="button">').addClass('btn btn-warning').text('HI');
}
cell2.append(button);
row.append(cell1);
row.append(cell2);
tbody.append(row);
table.append(tbody);
}
$('#searchTable').append(table);
});
Now on individual row click i am calling a function selectRow(num,alpha) which expects two paramters as:
function selectRow(num,alpha){
$(document).ready(function() {
alert("Number and Alphabet is "+num + alpha );
});
But when the control comes to the above function the alert always prints the last record of both the array.
What am i doing wrong? Looking forward to your answers.
Try to pass this
in your function and use data-*
attribute.
Also in your code you are creating multiple tbody
for a single table
, use the below 2 lines before your loop like,
var tbody = $('<tbody></tbody>');
tbody.append(row);
function selectRow(ths){ alert("Number and Alphabet is "+$(ths).data('num') + $(ths).data('alpha')); }; $(function () { $("#searchBtn").click(function () { var numArray = new Array("1", "2", "3", "4", "5", "6", "7", "8", "9", "10"); var alphaArray = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j"); var table = $('<table></table>').addClass('table'); var tbody = $('<tbody></tbody>'); table.append(tbody); for (i = 0; i < numArray.length; i++) { var num = numArray[i]; var alpha = alphaArray[i]; var row = $('<tr data-num="'+num+'" data-alpha="'+alpha+'"></tr>'); row.on("click", function () { selectRow(this); }); var cell1 = $('<td></td>').addClass('spacer').text(numArray[i]); var cell2 = $('<td></td>'); var button; if (alpha == "b") { button = $('<button type="button">').addClass('btn btn-primary').text('BOY'); } else if (alpha == "g") { button = $('<button type="button">').addClass('btn btn-success').text('GIRL'); } else if (alpha == "h") { button = $('<button type="button">').addClass('btn btn-warning').text('HI'); } cell2.append(button); row.append(cell1); row.append(cell2); tbody.append(row); } $('#searchTable').append(table); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="searchBtn">Search</button> <div id="searchTable"></div>
Try replacing these lines :
var row = $('<tr></tr>');
var num =numArray[i];
var alpha =alphaArray[i];
row.on("click", function () {
selectRow(num, alpha);
});
with this code:
var num =numArray[i];
var alpha =alphaArray[i];
var row = $('<tr onclick="selectRow(' + num + ',' + alpha + ');"></tr>');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.