通过 javascript(jquery) 将 <td> 添加到表中答案

【问题标题】：add a <td> to a table via javascript(jquery)通过 javascript(jquery) 将 <td> 添加到表中
【发布时间】：2012-03-17 21:39:52
【问题描述】：

我的应用程序中有这个 PHP，

<table><tr>
                <?php

                if($music_interests !== FALSE)
                {
                    $count = 0;
                    foreach($music_interests as $interest)
                    {
                    ?>
                    <td>
                    <div class="interest inline">
                        <img src="<?php echo $interest['image']; ?>" alt="<?php echo truncate($interest['name'], 25); ?>" class="interest_img"/>
                        <p><?php echo truncate($interest['name'], 25); ?></p>

                        <div class="interest_popup">
                            <img src="<?php echo $interest['image']; ?>" alt="<?php echo truncate($interest['name'], 25); ?>" class="interest_img left"/>
                            <div class="right">
                                <strong><?php echo truncate($interest['name'], 25); ?></strong>
                                <p>Music<br><?php echo @$interest['num_users']; ?> users have this interest.</p>
                                <?php echo anchor('my_profile/remove_interest/'.$interest['id'], 'Remove interest', array('class' => 'button red upper rounded_5 small remove')); ?>
                            </div>
                            <div class="clear"></div>
                        </div><!--.interest_popup-->
                    </div>
                    </td>
                    <?php
                    $count = ($count + 1)%4;
                    if ($count == 0)
                    {
                        echo "</tr><tr>";
                    }
                    }
                }
                ?>

如您所见，PHP 创建了一个表，每 4 个<td> 创建一个新行。我现在正在向我的应用程序添加 ajax 功能，但是如果我需要先创建一个新行，然后再添加我的 ajax 请求创建的 <td>，我无法弄清楚我将如何解决。

目前我有这段代码可以将 td 添加到我的表中，

var interest = "<td>" + msg.name + "</td>";
self.parent().children('table').append(interest);

【问题讨论】：

您的陈述：“但我无法弄清楚如果我需要先创建一个新行，然后再附加我的 ajax 请求创建的，我将如何解决。”不是很清楚。您的 ajax 请求的响应是否可靠一致？
我的 ajax 的响应是一致的。

【解决方案1】：

您不应将表格单元格直接附加到表格中。表格单元格进入表格行。

获取表格的最后一行，并检查其中有多少个单元格。如果已经有四个单元格，您需要创建一个新的表格行并附加到表格中，然后将单元格添加到该行。否则，您可以将单元格添加到现有行。

【讨论】：

【解决方案2】：

警告！未经测试的代码！我会这样做：

var interest = "<td>" + msg.name + "</td>";
var $lastTr = self.parent().children('table tr:last');
if ($lastTr.find("td").size() < 4) {
  $lastTr.append(interest);
} else {
  interest = "<tr>" + interest + "</tr>";
  self.parent().children('table').append(interest);
}

【讨论】：

我刚刚修改了sico87的代码，我猜self是一个jQuery对象。

【解决方案3】：

更新：我修改了答案，因为现在我对这个问题有了更好的理解。

以下示例展示了如何动态创建 td 和 tr 元素。用您使用 AJAX 获得的任何内容替换常量内容（“某个值”）。

JSFiddle（添加了 jQuery 1.7.1）：http://jsfiddle.net/BUR7p/3/

<html>
    <head>
        <script language="javascript" type="text/javascript">
            //my previous understanding of the question
            //function AddNewRow()
            //{
            //    var row = $(document.createElement("tr"));
            //    row.append("<td>some value</td>");
            //    row.append("<td>another val</td>");
            //    $("#mytable").children().append(row);             
            //}

            //my corrected understanding: you don't know how
            //to decide how to create a new row to put in the
            //table. note i added a table body explicitly, it
            //is added by default automatically if you don't.
            function AddNewData()
            {
                var row = $("#tablebody").children().last();
                if(row.children().length >= 4)
                {
                    console.log("creating a new row...");
                    //create a new row if we need one
                    row = $(document.createElement("tr")); 
                    $("#tablebody").append(row);          
                }
                else console.log("using existing row...");

                //add new datum to row
                row.append("<td>some value</td>");
            }
        </script>
    </head>
    <body>
        <p>
            <table id="mytable">
                <tbody id="tablebody">
                <tr>
                    <td>one</td>
                    <td>two</td>
                </tr>
                <tr>
                    <td>three</td>
                    <td>four</td>
                </tr>
            </tbody>
            </table>
        </p>
        <a href="#" onclick="AddNewData()">Add new row</a>
    </body>
</html>

作为替代方案，您可以修改服务器端，使其除了数据之外还返回一个标志，是否应在新行中创建数据。

请跟进并告诉我们这是否有帮助。

【讨论】：

【解决方案4】：

在this question找到答案：

// pass stuff to insert to .after() as an HTML string
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

:last psuedoselector 和 .after() function 的文档

【讨论】：

将行追加到表中是个好主意，但问题不仅如此。