jquery-ui - 在表格单元格内存储和访问 div 的数据

Question

http://fiddle.jshell.net/kBFU7/2/ 在代码中，我通过 jQuery 创建了一个动态表。 我还为每个表格单元格分配了一个 div。 我希望存储和访问此 div 的数据，例如，每个 div 的行和列。

因此，我想就如何存储这些数据征求一些建议。 我尝试按照此链接 http://time2hack.blogspot.sg/2012/11/jquery-store-access-relative-info-within-HTML-element.html#axzz2Ee3iLxCt 中的建议为每个 div 创建一个跨度以在其中存储信息但这似乎不合适，我无法取回信息。

如果有人能给我一些我可以尝试的建议，我将不胜感激。

Answer 1

所以基本上您想要创建一个动态表并访问每个 TD 及其数据。 为此，您不需要将任何 div 或 span 放入这些 TD 中来访问它们的内容(如果这就是您想要的)。最简单的方法是根据它们的行和列位置为每个 TD 分配一个 id。这样您就可以在循环中或直接或不访问它们中的每一个。

下面我写了一个 super 简单的方法来实现它。当然，您可以根据需要自定义或增强它。但是你应该理解正确的想法？

(我正在使用你的代码来做到这一点)

$(document).ready(function() {
createTable($("#tb1"));
    function createTable(tbody){
      if (tbody == null || tbody.length < 1) return;
      for(var r=0;r<5;r++){
        var trow=$("<tr>");
        for(var c=0; c<5;c++){
            var tcol=$("<td>")
            tcol.attr("id","row"+r+"col"+c); /// assign id to each td

            var cellText = "row " +r + " col " +c 
            $("<div>")
                .text(cellText)
                .appendTo(tcol)

            tcol
                .appendTo(trow)
        }
        trow.appendTo(tbody);
      }
    }    
});

所以基本上你是这样做的:

<td id="row1col1"></td>
   <td id="row1col2" ></td>

现在只要你想访问任何单元格就这样做

$('#row1col1').text();
or
$('#row1col1').html();

您可以像这样循环访问单元格

for(var r=0;r<5;r++){
    for(var c=0;c<5;c++){

       var cellValue=   $('#row'+r+"col"+c).text() // or .html()

         makeAjaxRequest(cellValue); /// send to server or whatever
   }
}