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

Question

我有一个来自 datatable 的数组，在我的 Bootstrap 模式中填充了一个表。

在模态中显示如下:

这是我当前的 jQuery，用于在我的模式中填充我的表:

$('#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"));

看起来像下面这样:

它用空格代替了逗号，这不是我想要的。我希望每个条目都换行 - 我做错了什么？

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>

Answer 1

该死的。当我点击提交时，使用下面的代码立即得到了答案

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