Question

我正在通过一个带有jquery的表循环，并尝试从TD获取文本。获得TD值后，我将它们连接成一个文本：

table.find('tr').each(function (i) {
        var $tds = $(this).find('td'),
            order_num = $tds.eq(1).text(),
            row_id = $tds.eq(2).text(),
            accnt_id = $tds.eq(3).text(),
            status_cd = $tds.eq(4).text(),
            sub_status = $tds.eq(5).text();

row = row+"\n"+order_num+"  "+row_id+"  "+accnt_id+""+status_cd+"   "+sub_status;
    });

    $("#dialog").text(row);
    $("#dialog").dialog("open");
    copyToClipboard(row);

问题是，我无法在每个tr行的末尾添加新行。我尝试了以下但是没有成功：

row = row+"\n"+order_num+"  "+row_id+"  "+accnt_id+"    "+status_cd+"   "+sub_status;

row = row+"\u000A"+order_num+"  "+row_id+"  "+accnt_id+"    "+status_cd+"   "+sub_status;

当我将文本添加到对话框或剪贴板时，缺少新行，而我所拥有的只是文本蛇。你知道如何在JQuery中正确添加新行吗？感谢

Answer 1

我认为您应该尝试添加 ，而不是\n来生成新行。这可能会有所帮助。

当您还要复制到剪贴板时，您应该将行存储为数组，您可以将 加入对话框，但\n用于剪贴板。

您还可以看一下简化代码;如果您只是从所有单个TD获取文本，则可以使用Node.textContent方法代替TR（documentation）。这可能会产生意想不到的结果，虽然取决于空白区域，因此坚持使用TD仍然是一个更好的选择。

另请注意在jQuery代码中使用method chaining，因此您不会使用两行来编写$('#dialog')代码。

例如：

var rowContent = [];
table.find('tr').each(function(i) {
  rowContent.push($(this).get(0).textContent);
});

$('#dialog').html(rowContent.join('<br />')).dialog('open');
copyToClipboard(rowContent.join("\n"));

N.B。在编写本文时，我没有经过测试，我没有表格的HTML。

Answer 2

默认情况下，HTML元素（pre，code除外）会折叠空格（折叠为一个）和换行符。您必须使用 来换行。

您可以将换行符替换为 仅用于显示。

var text = "my line1 \nMyline 2";
$('#dialog').html(text.replace("\n", "<br>"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dialog"></div>

您还可以使用white-space CSS使您的元素显示预格式化文本。

var text = "My line1\nMyline2";
$('#dialog')
  .css({'white-space': 'pre'})
  .text(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dialog"></div>

您应该遵循的方法取决于您要完成的任务。

Answer 3

问题解决了。

这是我用来将文本推送到剪贴板的方法

function copyToClipboard(element) {
            var $temp = $("<input>")
            $("body").append($temp);
            $temp.val(element.join("\n")).select();
            document.execCommand("copy");
            $temp.remove();
        }

将输入更改为textarea解决了我的问题，文本已插入剪贴板并且新行已到位。希望它对其他人也有用。

在JQuery中添加新行

3 个答案: