JavaScript and jQuery Alert find("td:first").html() and Click

Question

我不确定为什么我使用 find("td:first").html() 的 getCereal 变量 id 不起作用。我已经能够创建我的 table，但是我的点击事件将不起作用。我很难过。任何输入将不胜感激。

    <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>

Answer 1

真的不清楚这里的目标是什么。也许这会有所帮助，请考虑以下代码。

$(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()

每个对象都有我们可以调用并插入到 Table 单元格元素 <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>

构建并输出table后，您可以将click事件绑定到带有.on()或.click()的行。我建议 .on() 因为它更能容忍动态内容。

我们将 click 事件绑定到每一行，然后从该行收集数据并创建警报。

希望这对您有所帮助。