javascript - JavaScript 和 jQuery 警报 find("td:first").html() 并单击
问题描述
我不确定为什么我使用 find("td:first").html() 的 getCereal 变量 id 不起作用。我已经能够创建我的表,但是我的点击事件将不起作用。我难住了。任何输入将不胜感激。
<div id="cer"></div>
<script type="text/javascript">
// jQuery onClick event
// the click function MUST BE USED CANNOT BE ALTERED OR REMOVED
$(function () {
$("table tr").click(function (event) {
function getCereal(id) {
for (var cerId = 0; cerId < cereals.length; cerId++){
if(cereals[cerId].id == id){
alert(cereals[cerId].id +" " + cereals[cerId].name + " " +
cereals[cerId].like);
break;
}
}
}
var id = $(this).find("td:first").html();
getCereal(id)
// This creates an cereal constructor object
function cereal(id, name, like) {
this.id = id;
this.name = name;
this.like = like;
}
// This creates 5 new objects with cereal information.
const cereals = [
new cereal(1, 'Captain Crunch', 'Yes'),
new cereal(2, 'Frosted Wheats ', 'Yes'),
new cereal(3, 'Shredded Wheat', 'No'),
new cereal(4, 'Trix', 'No'),
new cereal(5, 'Count Chocula', 'No'),
];
var output = "<h1>Cereal Listing</h1><table><thead>"+"<tr>"+"<th>"+"Id"+"</th>"+"<th>"+"Cereal Name"+"</th>"+"<th>"+"Like?"+"</th>"+"</tr>"+"</thead>"
for (var x = 0; x < cereals.length; x++) {
output +='<tr>' + "<td>" + cereals[x].id + "</td>" +"<td>" + cereals[x].name + "</td>" + "<td>" + cereals[x].like +"</td>" + '</a>' + "</tr>";
}
output += "</table>";
document.getElementById('cer').innerHTML = output;
})
});
</script>
解决方案
真的不清楚这里的目标是什么。也许这会有所帮助,请考虑以下代码。
$(function() {
function cereal(id, name, like) {
this.id = id;
this.name = name;
this.like = like;
}
const cereals = [
new cereal(1, 'Captain Crunch', 'Yes'),
new cereal(2, 'Frosted Wheats ', 'Yes'),
new cereal(3, 'Shredded Wheat', 'No'),
new cereal(4, 'Trix', 'No'),
new cereal(5, 'Count Chocula', 'No'),
];
var output = "<h1>Cereal Listing</h1>";
output += "<table class='cereal-table'><thead>";
output += "<tr><th>Id</th><th>Cereal Name</th><th>Like?</th></tr>";
output += "</thead><tbody>";
$.each(cereals, function(k, c) {
var row = $("<tr>", {
"data-c-id": k
});
$("<td>").html(c.id).appendTo(row);
$("<td>").html(c.name).appendTo(row);
$("<td>").html(c.like).appendTo(row);
output += row.prop("outerHTML");
});
output += "</tbody></table>";
$("#cer").html(output);
$(".cereal-table").on("click", "tr", function(e) {
var cId = parseInt($(this).data("c-id"));
console.log("Row C-ID: " + cId);
var data = "";
data += "ID: " + cereals[cId].id;
data += ", Name: " + cereals[cId].name;
data += ", Like: " + cereals[cId].like
alert(data);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cer"></div>
由于 jQuery 是一个 JavaScript 框架,你可以混合和匹配两者,但我尝试保留其中一个。这一切都在 jQuery 中。
该函数创建一个对象。一个数组中有 5 个对象,我们将使用$.each()
. 这是为此而设计的功能。参见:
jQuery.each()
每个对象都有我们可以调用并插入到表格单元元素中的参数<td>
。jQuery 让我们能够快速将元素创建为 jQuery 对象:$("<td>")
.
由于目标似乎是创建一个HTML 文本字符串,我们可以通过请求属性output
将我们创建的所有 jQuery 对象转换为 HTML 。outerHTML
运行代码的结果是:
<h1>Cereal Listing</h1><table><thead><tr><th>Id</th><th>Cereal Name</th><th>Like?</th></tr></thead><tbody><tr><td>1</td><td>Captain Crunch</td><td>Yes</td></tr><tr><td>2</td><td>Frosted Wheats </td><td>Yes</td></tr><tr><td>3</td><td>Shredded Wheat</td><td>No</td></tr><tr><td>4</td><td>Trix</td><td>No</td></tr><tr><td>5</td><td>Count Chocula</td><td>No</td></tr></tbody></table>
构建并输出表后,您可以使用或将click
事件绑定到 Row 。我建议,因为它更能容忍动态内容。.on()
.click()
.on()
我们将click
事件绑定到每一行,然后从该行收集数据并创建警报。
希望这可以帮助。
推荐阅读
- peewee - 如何在 peewee 中即时将 CharField 转换为 DateTimeField?
- mysql - 将 dockerized mysql 容器部署到边缘设备
- html - CSS下拉菜单不会消失
- reactjs - 如何计算 Firestore 中数组数据中的元素数?
- angular - Angular 7 库 - 如何捆绑依赖项而不将它们添加到主应用程序
- c# - 如何在 Windows 10 上的 UWP 应用和 iOS 设备上的 Xamarin.Forms 应用之间创建 TCP 套接字
- angular - AmCharts 4:网格步骤
- java - Junit 5,Spring 应用程序上下文未在 @DirtiesContext 上关闭
- html - html输入返回未定义的快递
- visual-studio-code - 为什么 VS Code 需要这么多内存?我怎样才能让它更有效地运行内存?