如何通过 jquery 向 HTML 表添加单选按钮

Question

我正在使用 Jquery $.post 根据从下拉列表中的选择从 SQL 获取字符串数组，然后我正在读入 HTML 表。 每次他们在下拉菜单中更改选择时，它都会从表中清除除 header 行之外的所有行并重新加载新值。 那工作正常。

它只是一个基本的 3 行表； 一个唯一标识符、一个值和一个显示为字符串的计数。 每条记录都有 3 个，所以我只是使用带有计数器的 for 循环来控制行的开始/结束。 在我的表格中，它的 header 定义如下：

    <div class="col-md-10">
            <table id="attEditTable" style="width:100%" cellpadding="0" cellspacing="0" border="1" class="row">
                <tbody>
                    <tr style="background-color: #F0F8FF;">
                        <th></th>
                        <th>Attribute Value</th>
                        <th>Item Count</th>
                    </tr>
                </tbody>
            </table>
        </div>

我现在正试图将每行的第一个单元格更改为一个单选按钮，其值设置为我在该单元格中显示的值。

当前，当视图显示时，它在每行的第一个单元格中显示 [object Object]，而不是单选按钮。

抱歉，我是新手，没有接受过 Java 或 MVC 方面的培训 - 所以希望只是一个简单的语法问题......

尝试这个基本的输入返回语法错误：

    <input type="radio" name="SelERow" value='+editValues[i]+' />

我也尝试过（两者都具有相同的 [object Object] 结果）：

    $("input:radio[name=\"SelERow\"][value="+editValues[i]+"]")
    $('<input type="radio" id="ERow" name="SelERow" value='+editValues[i]+' />')

根据大卫的建议，我现在也尝试过（都没有数据也没有错误）：

    '<input type="radio" name="SelERow" value='+editValues[i]+' />'
    var tblCell = $('<td />');  // create an empty <td> node
    if (x == 1 || (x - 1) % 3 == 0) {
        var input = $('<input />', { type: 'radio', id: 'ERow', name: 'SelERow', value: editValues[i] });
        tblCell.append(input);  // append an <input> node to the <td> node
     } else {
        tblCell.text(editValues[i]);  // or just set the text of the <td> node
     }

对于第二个，我还更改了行： tblRow = tblRow + ""; 改为 tblRow = tblRow + tblCell + "";

当前脚本

<script>
    $(function () {
        $("#EditAttributeName").change(function () {
            var selectedName = $(this).val();

            // Delete all but first row of table
            $("#attEditTable").find($("tr")).slice(1).remove();

            var url2 = "EditDD2changed?selectedName=" + selectedName;

            $.post(url2, function (editValues) {

                var x = 0;
                var tblRow = "<tr>";
                for (var i=0; i < editValues.length; i++)
                {
                    x++;
                    if (x == 1 || (x - 1) % 3 == 0) {
                        tblRow = tblRow + "<td>" + $('input:radio[name="SelERow"][value="' + editValues[i] + '"]');
                    }
                    else {
                        tblRow = tblRow + "<td>" + editValues[i] + "</td>";
                    }

                    if (x % 3 == 0)
                    {
                        tblRow = tblRow + "</tr>";
                        $("#attEditTable").append(tblRow);
                        tblRow = "<tr>";
                    }
                }
            })
        });
    });
</script>

控制台未显示任何错误消息。

Answer 1

好像很近了首先，这两种尝试有一个重要的区别。 这是 jQuery 选择器语法：

$('input:radio[name="SelERow"][value="' + editValues[i] + '"]')

所以它不是创建一个<input/> ，而是寻找一个<input/> 。 在这种情况下，这不是您想要的。 您的其他尝试使用创建元素的语法：

$('<input type="radio" id="ERow" name="SelERow" value=editValues[i] />')

虽然这里的一个问题（这可能只是发布问题时的复制/粘贴错误？但为了完整性和未来的读者，它也可能会得到解决......）似乎是editValues[i]只是字符串。 您想将其连接到字符串中。 有几种方法可以做到这一点。 直接串联：

$('<input type="radio" id="ERow" name="SelERow" value="' + editValues[i] + '" />')

或字符串插值（注意不同的整体引号，这次使用反引号）：

$(`<input type="radio" id="ERow" name="SelERow" value="${editValues[i]}" />`)

后者是较新的语法，但现在应该得到足够广泛的支持。 （尽管在任何给定的商业环境中，谁知道可能需要支持哪些古老的浏览器。）可能只是两者之间的个人偏好。

它正在显示 [object Object]

产生您观察到的结果的主要问题是您将 jQuery 操作的结果直接连接为字符串：

tblRow + "<td>" + $('<input type="radio" id="ERow" name="SelERow" value="' + editValues[i] + '" />')

（巧合的是，无论您是创建元素还是查找元素，观察到的 output 都是相同的，因为这两个操作都返回 object。）

$()操作的结果本身并不是一个字符串，而是一个更复杂的 object。 当与字符串连接时，它必须被解释为字符串，除非 object 具有有意义的.toString()实现（这似乎没有），否则复杂 object 的默认字符串表示就是这样： "[object Object]"

您可以在这里采取几种方法。 一种是完全使用字符串，你不一定需要 jQuery object 这里：

tblRow + '<td><input type="radio" id="ERow" name="SelERow" value="' + editValues[i] + '" /></td>'

Since you're using jQuery later to append the result to the HTML, you can just build up all the HTML you like as plain strings and let jQuery handle turning them into DOM objects when you send them to .append() .

另一个选项，如果您肯定想在这种情况下“使用 jQuery”或被指示这样做，则将 HTML 元素的层次结构构建为 jQuery 对象，然后将该层次结构传递给.append() 。 构建这样的层次结构可能如下所示：

var tblCell = $('<td />');  // create an empty <td> node
if (x == 1 || (x - 1) % 3 == 0) {
    var input = $('<input />', { type: 'radio', id: 'ERow', name: 'SelERow', value: editValues[i] });
    tblCell.append(input);  // append an <input> node to the <td> node
} else {
    tblCell.text(editValues[i]);  // or just set the text of the <td> node
}

请注意，每个$()操作都会创建一个 HTML 元素节点，您可以为其提供属性作为$() function 的第二个参数。 然后这些节点可以.append() -ed 到彼此就像你.append() HTML 字符串到$("#attEditTable") 。

在您的特定情况下，这可能会变得更加麻烦，因为您的循环不仅仅是循环通过单元格或仅通过行，而是通过两者并使用硬编码计数来确定它是否到达行尾。 因此，作为学习/练习 jQuery 的一部分，尝试这种方法可能是值得的。 但我怀疑让您的代码以最少的更改工作的最短路径是上面的字符串连接方法。

---

旁注：此代码对在此循环中创建的单选按钮使用相同的id值。 结果是页面上应该有多个元素具有相同的id 。 这在技术上是无效的 HTML 。 如果您曾经尝试使用该id来引用元素，则结果行为将是未定义的。 （它可能在某些情况下有效，在其他情况下可能无效，纯属巧合。）尽管如果您不需要使用该id来引用元素，您也可以完全删除它。