时间戳

首页 > 解决方案 > 为什么断行 (\n) 在我的代码中不起作用？

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

问题描述

我正在创建电视提供商表和他们的联系人。

您可以在那里看到的一般功能： 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. 单击带有提供程序的按钮会调用specialFunc()按钮内部的 JavaScript 函数传递提供程序。
  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);
}

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

标签： javascriptphpcssfunctionformatting

解决方案

我想您知道，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应该在哪里时），那会更好。

推荐阅读