在 JQuery 中添加新行

Question

我正在循环 table 和 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

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

由于您还要复制到剪贴板，因此您可能应该将行存储为一个数组，在对话框中加入 <br />，在剪贴板中加入 \n。

您还可以稍微简化一下代码；如果您只是从所有单独的 TD 获取文本，则可以在 TR (documentation) 上使用 Node.textContent 方法。这可能会产生意想不到的结果，但取决于白色 space，因此坚持使用 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 用于您的 table。

Answer 2

默认HTML个元素（除了pre，code）折叠白色-space（折叠为一个）和换行符。您必须使用 <br> 才能换行。

您可以将换行符替换为 <br> 只是为了显示。

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 中添加新行

Adding new line in JQuery

jquery

text

newline