使用append在js创建的表上添加onclick事件并导航以显示相关数据

Question

我使用数组中的数据在html上创建了1个表。现在我想要的是用户点击表格[页面名称-showlist.html]中显示的名称，然后在下一页上它应该在div中显示描述。我怎样才能实现它，请注意 - 我在数组中获取的数据来自本地存储]

请参阅下面的代码，我再说一遍 - 1.需要在array_no.title上添加点击，然后导航到新页面 2.显示<div id="showData"> description of this title </div>，下面还附上阵列结构的参考，以便更好地理解

function fetch_section_data_1(){

var keys = Object.keys(localStorage).filter(function(key) {
  return /^section\d+$/.test(key);
});

var dataArray = keys.map(function(key) {
 return JSON.parse(localStorage.getItem(key));
});
console.log(dataArray.length);

var $table = $( "<table></table>" );
for(i=0;i<dataArray.length;i++){
    var array_no = dataArray[i];
    var $line = $( "<tr></tr>" );
    $line.append( $( "<td></td>" ).html( array_no.title ) );
    $table.append( $line );

}

$table.appendTo(document.body);

}

Answer 1

您应该将click事件添加到表格行。像这样：

function fetch_section_data_1(){
  var keys = Object.keys(localStorage).filter(function(key) {
    return /^section\d+$/.test(key);
  });

  var dataArray = [{
    title: "test1",
    description: "<h1>test1</h1>"
  },
  {
    title: "test2",
    description: "<h1>test2</h1>"
  }]
  console.log(dataArray.length);

  var $table = $( "<table></table>" );
  for(i=0;i<dataArray.length;i++){
      var array_no = dataArray[i];
      var $line = $( "<tr class='row'></tr>" );
      $line.click(function(event) {
        var index = $(this).index();
        var item = dataArray[index];
        $("#description").html(item.description);
      })
      $line.append( $( "<td></td>" ).html( array_no.title ) );
      $table.append( $line );

  }

  $table.appendTo(document.body);

  var descriptionContainer = $("<div id='description'>yes</div>'");
  descriptionContainer.appendTo(document.body);
}

这是一个jsfiddle，它的工作原理。我刚刚创建了一个临时数据数组： https://jsfiddle.net/jpn3bqst/