javascript - 在一个 td 中显示数组项目，每个项目在新行上

Question

在这上面花了 3 个小时，根本想不通。

我有一个array来自一个datatable填充table我的bootstrap modal

显示在中modal时显示如下

这是我目前在我JQuery的tablemodal

$('#selectedReportDataTable').on('click', 'button[name="deleteContentButton"]', function () {
    var deleteRunData = selectedReportDataTable.row($(this).closest('tr')).data();

    $('#deleteModal').modal('show');
    $('span[name=selectedReport').text(reportSelectedLowerCased);
    $('td[name=modalPeriod]').text(deleteRunData.period);
    $('td[name=modalSpecParams]').text(deleteRunData.specialParams);
    $('td[name=modalFreq]').text(deleteRunData.frequency);
    $('td[name=modalTimeFrame]').text(deleteRunData.timeFrame);
    $('td[name=modalTime]').text(deleteRunData.time);
    $('td[name=modalRecipients]').text(deleteRunData.recipient);

    $('#deleteModal').on('shown.bs.modal', function () {
        $('#deleteModalNoButton').focus();
    });
})

它的最后一行

$('td[name=modalRecipients]').text(deleteRunData.recipient);

填充电子邮件列

这是我尝试过的代码，但我想我已经结束了，代码盲了，我想不出该怎么做了

var abc = deleteRunData.recipient
var def = deleteRunData.recipient.toString().split(", ").join("<br/>");
var ghi = $('td[name=modalRecipients]').text();
var jkl = def.replace(/,/g, "\n")

console.log(abc)
console.log(def)
console.log(ghi)
console.log(jkl)

console.log(abc.join('\r\n'));

这给了我以下

如果我更换

$('td[name=modalRecipients]').text(deleteRunData.recipient);

与以下（例如）

$('td[name=modalRecipients]').text(def.replace(/,/g, "\n"));

Tt 如下所示

它用空格替换逗号，而不是在我希望每个条目都在新行上之后我做错了什么。我敢打赌这是一个简单的答案，但我很生气，很生气，我想不出该怎么做

HTML 只是装箱

<table class="table" style="table-layout: fixed; width: 100%">
    <tr>
        <th class="modalTable" style="width: 50px">Period</th>
        <th class="modalTable" style="width: 85px">Additional details</th>
        <th class="modalTable" style="width: 55px">Frequency</th>
        <th class="modalTable" style="width: 45px">Time frame</th>
        <th class="modalTable" style="width: 25px">Time</th>
        <th class="modalTable">Recipient(s)</th>
    </tr>
    <tr>
        <td name="modalPeriod" class="modalTable"></td>
        <td name="modalSpecParams" class="modalTable"></td>
        <td name="modalFreq" class="modalTable"></td>
        <td name="modalTimeFrame" class="modalTable"></td>
        <td name="modalTime" class="modalTable"></td>
        <td name="modalRecipients" class="modalTable" style="word-wrap: break-word"></td>
    </tr>
</table>

标签： javascriptjquery

Answer 1

编辑：-好吧，我在接受的答案出现之前就开始了这个回复，但我想我会把它放在这里，以防其他人遇到这个问题并需要帮助。

原始答案

完全理解代码盲区，尤其是 div 和 css，因为这是后端编码中最令人沮丧和愤怒的部分！据我了解，您正在寻找要在电子邮件列中显示的多封电子邮件。举个例子，如果有两个收件人，[e-mail] 和 [e-mail]，那么我们会期望

[e-mail] [e-mail]

注意：电子邮件中没有逗号。

当我遇到这个问题时，通常我会在 javascripts 中编写以下代码

for (var i = 0; i < deleteRunData.recipient.length; i++) {
    $('td[name=modalRecipients]').append('<div>' + deleteRunData.recipient[i] + 
    '</div>');
}

当 deleteRunData 存在时，Thsi 有时会起作用，如果不存在，那么我们就有问题了！！有时它不存在，因为我们所依赖的前端编码人员（服务器人员）不要这样做！在 deleteRunData 不存在的情况下，我所做的是创建带有新行的所有可能的电子邮件组合的图像！

因此，例如，对于您的示例，我会在 photoshop 或paintshopro 上制作两封电子邮件的 jpeg 图像，然后我会这样做

$('td[name=modalRecipients]').append('<img src="http://en.wikipedia.org/wiki/Potato_chip#/media/File:Potato-Chips.jpg" width="500" height="600">')

为我工作。

在重新看到我的视线后，我只遇到了两件额外的事情

1. 为什么 [e-mail] 会收到五封关于他们晚上通话费用的电子邮件？我以为一个就够了？2.jquery 在与 css 和 php-sass 混合时会很危险。请确保它是您用例的仪式后端技术！

希望这可以帮助