Question

我不确定为什么使用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>

Answer 1

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

fixed

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

由于jQuery是JavaScript框架，因此您可以将二者混合使用，但我尝试保留其中一种。一切都在jQuery中。

该函数创建一个对象。数组中有5个对象，我们将使用<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="cer"></div>迭代数组。这是为此而设计的功能。看到： jQuery.each()

每个对象都有可以调用的参数，可以插入到表格单元元素$.each()中。 jQuery使我们能够快速将元素创建为jQuery对象：<td>。

由于目标似乎是创建一个$("<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将.on()事件绑定到行。我建议.click()，因为它可以容忍动态内容。

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

希望这会有所帮助。

JavaScript和jQuery Alert find（“ td：first”）。html（）并单击

1 个答案: