gpt4 book ai didi

javascript - Jquery 附加按钮显示不正确

转载 作者:行者123 更新时间:2023-11-28 03:05:35 25 4
gpt4 key购买 nike

我正在使用 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 会在追加时自动为 trtd 添加关闭标签,从而导致之后添加按钮。您可以通过查看浏览器开发人员工具中生成的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com