Question

我需要在Bootstrap类附加一个带有相同行的按钮。

我有这个追加行，在成功插入服务器后将数据添加到表中：

$("#id_of_my_tr").before("<tr><td>"+name+"</td><td>"+last_n+"</td><td>"+addr+"</td><td>"+btn+"</td></tr>");

它运作正常。现在我需要将一个按钮附加到具有引导类的同一行。

我试过这个剧本：

var btn = $('<button type="Button" id="del" name="del" class="btn btn-danger">Delete</button>');

然后我在脚本行之前的附加中添加它：

$("#before_tr").before("<tr><td>"+emp+"</td><td>"+pos+"</td><td>"+sal+"</td><td>"+btn+"</td></tr>");

结果是，当添加新行而不是按钮时，我得到一个文字说：

[object Object]。

更新

我尝试将按钮HTML添加为：

$("#before_tr").before("<tr><td>"+emp+"</td><td>"+pos+"</td><td>"+sal+"</td><td><button type="Button" id="del" name="del" class="btn btn-danger">"Delete"</button></td></tr>");

但我有一个空单元

Answer 1

尝试添加HTML的问题在于引用。您在字符串周围使用了与字符串中的属性相同的引号，因此属性引号结束了字符串。在字符串周围使用单引号，这样它们就不会与属性周围的双引号冲突。

$("#before_tr").before("<tr><td>"+emp+"</td><td>"+pos+"</td><td>"+sal+'</td><td><button type="Button" id="del" name="del" class="btn btn-danger">Delete</button></td></tr>');

Answer 2

试试这个黑客

var btn = '<button type="Button" id="del" name="del" class="btn btn-danger">Delete</button>';
$("#before_tr").before("<tr><td>"+emp+"</td><td>"+pos+"</td><td>"+sal+"</td><td>"+btn+"</td></tr>");

Answer 3

要避免此类问题，您可以创建分离的DOM元素，并将它们作为纯元素使用。然后，您可以将它们附加到页面DOM。

即。像这样的东西：

var $tr = $('<tr>');
var $td1 = $('<td>').html(name);
var $td2 = $('<td>').html(last_name);
var $td2 = $('<td>').html(addr);
var $td3 = $('<td>');
var $btn = $('<button>').attr('type','button').attr('id','del')
   .attr('name','del').addClass('btn btn-danger').html('Delete');
$td3.append($btn);
$tr.append($td1).append($td2).append($td3);

最后，您可以使用您想要的任何功能将按钮附加到页面的DOM中，例如＆＃39; .before＆＃39;。

我做得非常啰嗦。您始终可以找到自己的可读性/详细程度的平衡。这允许以非常安全的方式处理复杂的HTML，避免许多错误。

将按钮添加到新行

3 个答案: