Jquery附加按钮无法正确显示

时间：2015-09-22 20:57:37

标签： javascript jquery html

我正在使用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 Object] 12新职位0

[object Object} 30 Title Help Me 1

我不确定为什么它显示为[object Object]。当我做一些简单的事情时：

$('#report_area').append(btn);

按钮正确显示在页面上。任何有关这方面的帮助将不胜感激。提前谢谢。

2 个答案:

答案 0 :(得分：0)

您正在尝试在jQuery对象上设置本机DOM属性。请记住，jQuery对象是本机DOM对象的超集。更改代码以使用.val()和.attr() jQuery方法，如下所示：

var btn=$('<button/>');
btn.text('View');
btn.val(item.SURVEY_JOB_ID);
btn.attr('id', item.SURVEY_JOB_ID);

或者，为方便起见，您可以将这些方法链接在一起：

var btn= $('<button/>')
    .text('View')
    .attr('id', item.SURVEY_JOB_ID)
    .val(item.SURVEY_JOB_ID);

最后，更改您对.append()方法的使用，以便附加内容，如下所示：

$('#report_area').append(
    '<tr><td>',
    [
        btn,
        '</td><td>' + item.JOB_NUMBER + '</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr></table>'
    ]);

答案 1 :(得分：0)

要理解为什么这不起作用，您必须查看append的文档。

  

键入：htmlString或Element或Array或jQuery

append能够除了这些类型中的任何一种，并以不同的方式处理它们，所以当你传递一个元素（实际上是jQuery集合）时，它能够智能地将它转换为所需的html。 / p>

但是，在你的情况下，你传递一个字符串，所以它会天真地将字符串视为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);
相关问题
最新问题