Question

好的，所以我从json文件中提取数据，同时我将它们放入表中。我已经设法为每个td项目提供动态ID。但是，该id只能在html中访问，当我尝试用于函数时，它是未定义的，或者是获取每行的长度而不是id。

<script type='text/javascript'>
var dynID;

$(function() {

var data = [];

    $.getJSON( 'f-data.json', function(data) {
    $.each(data.data, function(i, f) {
   var tblRow = "<tr><th>" + '<td id = "editable'+this.id+'">' + f.Title+ "</td></th>";

     dynID = $(this).find("td").attr("id");
    tblRow += '<th colspan="2"><button type ="submit" class="edit" onclick="editButton(dynID)"></i></button>';


   $(tblRow).appendTo(".screens tbody");

});

});

});

<script type='text/javascript'>
function editButton(id) {

    alert(id);

}

JSON：

{ "data":[
  {
   "Title": "Screen 1",
    "id": 1
 },{
   "Title": "Screen 2",
   "id": 2
 }

上面会产生一个按钮，当按下按钮时，结果是不确定的。奇怪的是，id是正确生成的（例如editable1，editable2等）。我想我没有正确选择ID？

Answer 1

您正在$.each循环中遇到参考问题。在循环中，对$(this)的引用是由data数组元素组成的jQuery对象。它没有任何HTML。我相信您打算将tblRow视为/解析为jQuery对象，并从中提取id。这样做对性能有害。您当前的代码只是按钮的输出是：

<button onclick="editButton(dynID)"></button>

这是因为dynID正在成为字符串的一部分 - 这里没有连接发生。因此，输出将成为对全局范围dynID中名为window的变量的引用。

我会重写下面的代码。

$.each(data.data, function(i, f) {

   var id = this.id, // use id accross the loop.
       tblRow = "<tr><th>" + '<td id = "editable' + id +'">' + f.Name + "</td></th>";

   tblRow += '<th colspan="2"><button type ="submit" class="edit" onclick="editButton("' + id + '")"></i></button>';

   $(tblRow).appendTo(".screens tbody");

});

使用JSON文件存储TD ID的动态ID

1 个答案: