我身上有一个搜索按钮。在此搜索按钮上单击,我将按钮单击事件称为:
$(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);
});
现在,在单独的行上单击,我正在调用一个函数 selectRow(num,alpha),它需要两个参数:
function selectRow(num,alpha){
$(document).ready(function() {
alert("Number and Alphabet is "+num + alpha );
});
但是当控件到达上述函数时,警报始终打印两个数组的最后一条记录。
我做错了什么?期待您的答复。
最佳答案
尝试在函数中传递 this
并使用 data-*
属性。
此外,在您的代码中,您要为单个table
创建多个tbody
,请在循环之前使用以下两行,
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>
关于javascript - 如何将参数传递给动态行单击事件的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27794100/