JavaScript и jQuery Alert находят ("td: first"). Html () и нажимают

Question

Я не уверен, почему мой идентификатор переменной getCereal с использованием find ("td: first"). Html () не работает.Мне удалось создать свою таблицу, однако мое событие нажатия не будет работать.Я в тупике.Любой вклад будет принят с благодарностью.

    <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 Framework, вы можете смешивать и сочетать оба, но я стараюсь оставаться в одном или другом.Это все в 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событие в строке с .on() или .click().Я рекомендую .on(), поскольку он более терпим к динамическому контенту.

Мы связываем событие click с каждой строкой, а затем собираем данные из строки и создаем предупреждение.

Надеемсяэто помогает.