使用 JQuery 添加表格单元格答案

【问题标题】：Add table cell using JQuery使用 JQuery 添加表格单元格
【发布时间】：2014-01-07 20:27:32
【问题描述】：

我有一个大约四列的 HTML 表格。我正在使用 Ajax 查询数据，该 Ajax 使用 Django 从 SQL 表中提取信息。对于最后一列，我需要一个下拉菜单。

我从 Ajax 获取的 JSON 信息示例如下：

[[1, "abc", 1,  ["[2013-09-30]", "[2013-12-02]"]]
[[2, "def", 1,  ["[2013-09-30]"]]

它基本上显示 ID、一些字符串、频率和日期。我有大约 25 个不同的 ID。每个 ID 中的前三个数据点都具有相同的信息，但唯一不同的是我的日期。这就是为什么我需要一个下拉菜单来为每个 ID 选择日期。

我的问题是我的表格中的下拉菜单无法正常工作。它显示第一行中的所有日期，而其余行中的所有其他菜单都是空白的。我知道我的循环中有一个问题，我将下拉菜单附加到表格中，但我无法弄清楚发生了什么。任何帮助将不胜感激。

HTML

<table id = "templates" border = "1">
<thead>
    <tr>
        <th> Template ID </th>
        <th> Template Name </th>
        <th> Freq Multiplier </th>
        <th> As of Date </th>
    </tr>
</thead>
<tbody>
</tbody>
</table>

JQUERY

<script type="text/javascript">
$(document).ready(function fill_table() {
$.ajax({
    type:"GET",
    url: "/Tplots/ajax_temp/",
    dataType:'json',
    success: function(response) {
        for(var i = 0; i< response.length; i++) 
        {
            var item = response[i];
            for (var j = 0; j<10;j++) {
                var tempID = item[j];
                j = 1;
                var tempName = item[j];
                j =2;
                var freqM = item[j];
                j = 3;
                var as_of = item[j];
                j=4;
                $('#templates tbody').append("<tr id = i><td>" + tempID + "</td><td>" + tempName + "</td><td>" + freqM + "</td><td><select name='dropdown' id = 'dropdown'></select></td></tr>");               
                for (var k = 0; k<as_of.length; k++)
                {
                    var asofdate = as_of[k];
                    $('#dropdown').append($("<option>"+asofdate+"</option>"));
                }   
            }
        }
    }
})
    })
   </script>

【问题讨论】：

标签： javascript jquery html sql django

【解决方案1】：

为什么不在处理数据的时候建表呢？

<script type="text/javascript">
$(document).ready(function fill_table() {
$.ajax({
type:"GET",
url: "/Tplots/ajax_temp/",
dataType:'json',
success: function(response) {
    for(var i = 0; i< response.length; i++) 
    {
        $('#templates tbody').append("<tr>");            
        var item = response[i];
        for (var j = 0; j<4 ;j++) { 
            if (j <> 3) { // not the last column
                $('#templates tbody').append("<td>" + item[j] + "</td>");
            } else {
                $('#templates tbody').append("<td><select>");               
                for (var k = 0; k<as_of.length; k++) {
                    var asofdate = as_of[k];
                    $('#templates tbody').append("<option>"+asofdate+"</option>");
                } 
                $('#templates tbody').append("</td>"); 
            }
         }
         $('#templates tbody').append("</tr>");           
    }
})
})
</script>

【讨论】：

感谢您的想法。我想早点这样做，但遇到了问题。对于您编写的示例，我遇到了另一个奇怪的问题。在您构建菜单的 else 语句中，列不正确。它在日期列下向我显示了一个空的下拉菜单，然后它旁边的列具有实际的日期信息。它将 for 语句视为一个单独的单元格，我不知道为什么。
啊！我知道出了什么问题。抱歉，我实际上并没有运行代码，只是从头顶输入。尝试通过将添加到最后一个来关闭下拉菜单
不用担心。你会碰巧知道如何解决它吗？
您是否尝试在最后一个之前添加？在 for 循环之后： } $('#templates tbody').append("");

【解决方案2】：

您应该查看您的脚本生成的 HTML。看起来您正在为所有行和下拉列表分配相同的 ID。分配一个唯一的 ID 以便 jQuery 选择器可以选择正确的行或保存您创建的 jQuery 对象，如下所示：

var $table = $("#templates tbody");
...

var $row = $("<tr>").appendTo($table);
...
var $td = $("<td>").appendTo($row);
var $select = $("<select>").appendTo($td);
for(var k=0,size=as_of.length; k<size; k++) 
  $("<option>").appendTo($select).text(as_off[k]);
...

【讨论】：

谢谢！这绝对解决了我的下拉菜单问题。但菜单不再与行一致。菜单与 ID、名称和频率单元格不在同一行。