jquery - 使用 jquery 创建 html

Question

首先让我知道我的问题是否完全模糊或没有任何意义。

我想做的是:

我有一个页面显示一些数据 block ( block 可以被认为是一行数据)。每个 block 都是独立的 <DIV>在这个 <DIV> 里面我嵌套了两个表。

我的问题是，如何为负责显示的每个 html 标记填充或生成不同的“id”。我需要这样做，因为我正在使用 Jquery 处理用户点击事件并生成将发送回服务器的 json 数据。

此外，屏幕数据将以 json 数据类型出现。一个 sample 模拟 <DIV>附上

<div id="1" class="RedColor" >
<table id="tab1" class="recordTable">
<tr>
<td id="studentName1" class="studentName">
<table id="innertab1" border="0" width="100%" cellpadding="3">
 <tr>
  <td id="" class="error1" width="172">&nbsp;</td>
  <td id="rollNumber1" class="rollNumber" width="50">12</td>
  <td id="" class="studentName" colspan="2">ABC XYZ</td>
 </tr>

</table>
</td>
<td width="64" valign="top">

</td>
</tr>
</table>
</div>

Answer 1

我会以不同的方式处理这个问题。

我只会为每个“数据 block ”分配一个唯一 ID。在该 block 中，我只会使用类来标识数据的每个元素。

一个 block 中的每个类都是唯一的。

这就是我的 HTML 的样子(注意重命名类以使其在每个数据 block 中都是唯一的)

<div id="data1" class="RedColor" >
    <table class="recordTable">
        <tr>
            <td class="studentNameData">
                <table class="innerTab" border="0" width="100%" cellpadding="3">
                    <tr>
                        <td class="studentName"> ... </td>
                        ...
                </table>
            </td>
        </tr>
    </table>
</div>
<div id="data2" class="RedColor" >
    <table class="recordTable">
        ...

您甚至可以摆脱 div 包装器并将唯一 ID 放在每个外表上。

现在可以使用以下形式唯一标识每条数据:[数据 block ID] [类名]。

在 jQuery 中，可以使用 .find() 来完成 方法。

例如，要从数据 block 3 中检索学生姓名，我会使用

 $("#data3").find(".studentName").text();

我会遍历您从服务器获取的数据以填充表格。这是一个极其简化的版本，只是为了说明我所描述的内容。我删除了外部 DIV 包装器并将唯一 ID 添加到表中，这样您就可以看到它的外观:

简化示例:

// Function to add an empty table with class names
var $addTable = function() {
    // The table could be built with multiple methods too.
    return $('<table><tr><td class ="name"></td></tr></table>');
}   

$(function() {

    // The attribute = selector
    $("input[value='Get data']").click(function() {

        // Loading notice
        $("#showData").html("Loading...");

        // The AJAX call to get the data using POST
        $.post('/ajax_json_echo/', function(data) {

            // Clear loading notice
            $("#showData").html("");

            // Iterate through data
            //   and create a table for each item.            
            $.each(data, function(index, value) {

                // This is the div's unique ID
                var $id = "data" + index;

                $addTable().attr("id", $id).appendTo("#showData");
                $("#" + $id).find(".name").html(value);
            });
        });
    });
});​

jsFiddle example