javascript - 为什么换行 (\n) 在我的代码中不起作用？

Question

我正在创建电视 vendor 及其联系方式的表格。

您可以在那里看到的一般功能: https://imgur.com/u5uREJm

表格的构造方式是，每一行都是带有提供者的按钮。单击此按钮后，下一行将在单击的按钮下打开，显示联系信息。

ContactRow 包含 2 个单元格。在第一个中，我将电子邮件放在第二个电话号码中。然而，它并没有很好地呈现，联系人看起来像是被吐出来而不是正确格式化。

一般的想法是我想使用 \n或 <br/> 的任何其他替代方案为了我可以将 contactRow 格式化为如下所示的“表格”形式:

EMAIL1@EXAMPLE.COM | 0-000-000-000
EMAIL2@EXAMPLE.COM |
EMAIL3@EXAMPLE.COM | 0-000-000-000

程序是这样工作的:

1. 我使用 php 创建表并从 contacts.txt 导入联系人
2. 单击带有提供程序的按钮会调用 JavaScript 函数 specialFunc()传递按钮内部的提供程序。
3. specialFunc()电话 addRow()它里面的函数，它们都将在下面的伪代码中解释。

文件 contacts.txt以这种方式创建:

PROVIDER1;EMAIL1@EXAMPLE.COM EMAIL2@EXAMPLE.COM;0-000-000-000 0-000-00-00
PROVIDER2;EMAIL1@EXAMPLE.COM;0-000-000-000 0-000-00-00;
PROVIDER3;EMAIL1@EXAMPLE.COM EMAIL2@EXAMPLE.COM;0-000-000-000

因此电子邮件数量和电话号码数量可能在 0 到 6 之间变化。JavaScript 函数通过读取 ; 之前的第一个单词来选择联系人

之所以在视频中看到电子邮件格式非常好，是因为在 .css 中文件我让 EmailCell 和 PhoneCell 包装文本，所以在电子邮件的情况下，第一个适合，第二个不适合，这就是为什么它被移到另一行。然而，这不是一个好方法，因为如果有短电子邮件，则它们在同一行中。

我试图将 contacts.txt 中的每个 电话号码分开通过 ;用于测试和改造线:provInfoPhone = contactsFromTxt[2];到

provInfoPhone = contactsFromTxt[2] + "\n" + concatsFroxTxt[3];

然而这并没有任何帮助。它既不会在 html 中打印为“\n”，也不会换行并将其移动到下一行。

addRow(ProperIndexOfRow{wheretoinsert}){
    *code reffering to correct table, to correct position where to insert newRow*
    *code deleting previously added row(when someone is zapping over buttons)*
    let newCell = newRow.insertCell(0);
    let newText = document.createTextNode(provInfoEmail);
    newCell.appendChild(newText);
    let newCell2 = newRow.insertCell(1);
    let newText2 = document.createTextNode(provInfoEmail);
    newCell.appendChild(newText2);
}


specialFunc(prov) {
    switch(prov):
        case "EXAMPLE1":
            provInfoEmail = contactsFromTxt[1];
            provInfoPhone = contactsFromTxt[2];
            break;
        case "EXAMPLE2":
            provInfoEmail = contactsFromTxt[1];
            provInfoPhone = contactsFromTxt[2];
            break;
        [...]
    addRow(properIndex);
}

你能帮帮我吗？我知道我的问题需要大量阅读和理解，但我相信我缺乏解决此类问题的一些基本方法。

Answer 1

我想您知道，HTML 中的所有空格(包括制表符和换行符)都呈现为单个普通空格。要在没有您使用的 CSS 属性的情况下获得换行符，您需要将它们分成不同的文本节点，中间有一个 br 元素。大致:

let newCell2 = newRow.insertCell(1);
let first = true;
for (const entry of provInfoEmail.split("\n")) {
    if (first) {
        first = false;
    } else {
        newCell.appendChild(document.createElement("br"));
    }
}

用 \n 后处理你的字符串。显然，如果你能早点这样做(当你弄清楚 \n 应该在哪里时)，那会更好。