时间戳

首页 > 解决方案 > 如何通过 jquery 向 HTML 表添加单选按钮

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

问题描述

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

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

    <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>

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

标签： javascriptjqueryhtmlrazor

解决方案

好像很近了 首先，这两种尝试有一个重要的区别。这是一个 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] + '" />')

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

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

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

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

由于您稍后使用 jQuery 将结果附加到 HTML，因此您可以将所有喜欢的 HTML 构建为纯字符串，并在将它们发送到.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 元素节点，您可以为其提供属性作为$()函数的第二个参数。然后这些节点可以彼此.append()-ed 就像你.append()的 HTML 字符串到$("#attEditTable").

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

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

推荐阅读