Question

我需要在jquery中动态添加一行，这是我的代码：

var row = $('<tr />')
    .append($('<td />'))
    .append($('<td>' + response.nome + '</td>'))
    .append($('<td />', {
        style: "text-align:center"
    }).append($('<input />', {
        type: 'image',
        src: 'nienteico.png',
        'class': 'ajaxEdit',
        id: '1.' + response.row_id
    }).css({
        cursor: 'pointer',
        width: '40px',
        height: '40px',
    }).click(function() {
        cambiastato('1.' + response.row_id);
    })));

特别是关于我希望得到的最后一个元素＆＃39; id＆＃39;属性和一个onclick功能＆＃39;。类似的东西：

<tr>
<td></td>
<td>uytredsgfh</td>
<td style="text-align:center">
<input type="image" src="nienteico.png" style="cursor:pointer; width:40px; height:40px" id="1.15" class="ajaxEdit" onclick="cambiastato(1.15)"> 
</td>
</tr>

前两个元素是正确编写的，但不幸的是这是我得到的最后一个（id属性和onclick函数错过了！）

<td style="text-align:center">
<input type="image" src="nienteico.png" class="ajaxEdit" style="cursor: pointer; width: 40px; height: 40px;">
</td>

任何帮助或建议？感谢

Answer 1

您的代码是正确的。 jQuery没有向它向DOM添加Event Listener的元素添加属性。换句话说，即使它正在工作，它也不会出现在标记中。尝试向监听器添加console.log语句并尝试它 - 它应该可以工作。

另外，有一些最佳做法可能有助于保持代码更清晰，更易于维护。

在JavaScript中使用jQuery元素时，人们通常使用$作为变量名称的前缀。在您的示例中，这将是$row。
由于您正在编写嵌套元素，因此为每个主要元素创建一个变量通常会更加清晰，并在最后将它们组合在一起。这样可以减少必须进行重构时的表面积。在您的示例中，我可能会将$input元素拉入其自己的变量中。
内联样式，特别是用JavaScript编写的样式被认为是不好的做法。如果可能的话，你应该尝试添加一个类，然后在样式表中设置类的样式。

祝你好运！

Answer 2

这就是你所期望的。

您的id无效，因为它以数字开头 - 请参阅w3.org。由于这个原因，jQuery可能会拒绝它。

click事件不会写为标记的属性。相反，它被连接为标记所代表的DOM元素的属性。如果您将input放在页面上并单击它，您可能会发现它有效。

如果您确实想要将onclick和其他属性显式输出到标记中，您只需在初始标记创建调用中设置它们：

var row = $('<tr />')
    .append($('<td />'))
    .append($('<td>' + response.nome + '</td>'))
    .append($('<td style="text-align:center" />')
       .append($('<input onclick="cambiastato(1.' + response.row_id + ');" type="image" src="nienteico.png" class="ajaxEdit" id="1.' + response.row_id + '" />')
         .css({
            cursor: 'pointer',
            width: '40px',
            height: '40px',
         })
    ));

试图用jquery添加属性的麻烦

2 个答案: