我正在使用 Jquery/javascript/html。我正在尝试在我的表格中的标签内显示一个按钮。我将信息附加到我的 html 页面上的一个部分中。代码如下:
<html>
<body>
<p id="report_area"></p>
</body>
</html>
下面的 Javascript 文件
$('#report_area').append('<table>');
$('#report_area').append('<tr>');
$('#report_area').append('<th>' + view + '</th><th>' + col_1 + '</th><th>' + col_2 + '</th><th>' + col_3 + '</th>');
$('#report_area').append('</tr>');
var btn=$('<button/>');
btn.text('View');
btn.val=item.SURVEY_JOB_ID;
btn.id=item.SURVEY_JOB_ID;
// recently added code - start
btn.click(function()
{
window.localStorage.setItem("MyFirstItem", 10);
window.location = 'GoToThisOtherPage.htm'
}
// recently added code - end
$('#report_area').append('<tr><td>'+ btn +'</td><td>' + item.JOB_NUMBER +
'</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr>');
$('#report_area').append('</table>');
这似乎工作正常，但是按钮没有正确显示。它显示为一个对象。所有其他数据都正确显示我的表格行显示为:
[object 对象] 12 新职位 0
[object Object} 30 标题帮我 1
我不确定为什么它显示为 [object Object]。当我做一些简单的事情时:
$('#report_area').append(btn);
按钮正确显示在页面上。对此的任何帮助将不胜感激。提前致谢。
最佳答案
要了解为什么这不起作用，您必须查看 append 的文档.
Type: htmlString or Element or Array or jQuery
append 能够排除这些类型中的任何一种，并以不同的方式处理它们中的每一个，因此当您向它传递一个元素(实际上是 jQuery 集合)时，它能够智能地将其转换为所需的类型html.
但是，在您的情况下，您向它传递了一个字符串，因此它会天真地将字符串视为 html。之所以产生 [object Object]，是因为它依赖原生 JavaScript 将元素转换为字符串。您将使用 console.log(btn) 产生相同的输出。
// append recieves a jQuery collection, calls appropriate methods to obtain html
$('#report_area').append(btn);
// append receives a string, blindly assumes that it is already the desired html
$('#report_area').append(btn + '');
解决方案 1 - 单独追加
从您对其他答案的评论来看，这个解决方案似乎并不奏效。我认为这是因为 append 会在追加时自动为 tr 和 td 添加关闭标签，从而导致之后添加按钮。您可以通过查看浏览器开发人员工具中生成的 html 来检查是否属于这种情况。
$('#report_area').append('<tr><td>', [btn, '</tr></td>'])
解决方案 2 - 正确转换为字符串
$('#report_area').append('<tr><td>'+ btn[0].outerHTML +'</td><td>')
解决方案 3 - 将所有内容构造为 jQuery 集合
我认为您遇到的主要问题是混合元素和字符串。我写了一个工作 jsfiddle将所有内容构建为 jQuery 集合的解决方案。
var table = $('<table>');
var btnRow = $('<tr>');
var btnCell = $('<td>');
var btn=$('<button>');
btn.text('View');
btn.val('val');
btn.attr('id', 'id');
btn.on('click', function()
{
window.alert('Click');
});
btnCell.append(btn);
btnRow.append(btnCell);
table.append(btnRow);
btnRow.append('<td>1</td><td>2</td><td>3</td>');
$('#report_area').append(table);
关于javascript - Jquery 附加按钮显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32726787/