HTML/JS 输出 table 不显示水平边框

Question

我不明白为什么我的水平边框没有出现在我的输出部分中。请参见下面的代码和屏幕截图：我想要水平边框，如果可能的话，让日期字段远离包装到自身下方的下一行。

我希望有水平边框，如果可能的话，防止日期字段换行到其下方的下一行。

           <td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display()" /></button></td>
    </tr>
</table>
<table width="400px" align="center" colspan="40" table border="5">

    <tr style="background-color:#8FBC8F;">
        <td align="center"><b>Name</b></td>
        <td align="center"><b>Company</b></td>
        <td align="center"><b>Time In</b></td>
        <td align="center"><b>Time Out</b></td>
        <td align="center"><b>Description of Work</b></td>
    </tr>
    <tr>
        <td align="center"><div id="displayarea"></div></td>
        <td align="center"><div id="displayarea1"></div></td>
        <td align="center"><div id="displayarea2"></div></td>
        <td align="center"><div id="displayarea3"></div></td>
        <td align="center"><div id="displayarea4"></div></td>
    </tr>

我希望有水平边框，如果可能的话，防止日期字段换行到其下方的下一行。

function getValue() {
        var Items = "";
        var td1 = document.getElementById("displayarea").innerHTML.split("<br>");
        var td2 = document.getElementById("displayarea1").innerHTML.split("<br>");
        var td3 = document.getElementById("displayarea2").innerHTML.split("<br>");
        var td4 = document.getElementById("displayarea3").innerHTML.split("<br>");
        var td5 = document.getElementById("displayarea4").innerHTML.split("<br>");

        for (var i = 0; i < td1.length; i++) {
            if (td1[i])
                Items += td1[i] + " ,";
            if (td2[i])
                Items += td2[i] + " ,";
            if (td2[i])
                Items += td2[i] + " ,";
            if (td3[i])
                Items += td3[i] + " ,";
            if (td4[i])
                Items += td4[i] + " ";
            Items += "\n";
            
            
        }
        console.log(Items);
        return Items;
    }

    function display() {
        document.getElementById("displayarea").innerHTML += document.getElementById("fname").value + "<br />";
        document.getElementById("fname").value = "";
        document.getElementById("displayarea1").innerHTML += document.getElementById("lname").value + "<br />";
        document.getElementById("lname").value = "";
        document.getElementById("displayarea2").innerHTML += document.getElementById("sname").value + "<br />";
        document.getElementById("sname").value = "";
        document.getElementById("displayarea3").innerHTML += document.getElementById("pname").value + "<br />";
        document.getElementById("pname").value = "";
        document.getElementById("displayarea4").innerHTML += document.getElementById("jname").value + "<br />";
        document.getElementById("jname").value = "";
    }

Answer 1

要获取所有单元格的边框，请将其添加到 html 代码的顶部（在 head 内）：

<style>
  table { 
    border-collapse: collapse; 
  }
  td {
    border: 1px solid #555;
  }
</style>

根据需要调整边框粗细、样式和颜色（在td的border设置中）

Answer 2

这是使用元素在每次添加时添加一行的简单方法 - 在所有优秀的浏览器中都可用（Internet Explorer 不是那么快，我不是在跟你说话）

我还更改了读取值的方式

请注意，在行中的单元格中使用 class 而不是 id - 只需对代码进行最少的更改即可轻松获取所有内容

虽然，我个人会以不同的方式获取行数据数据（如 alternativeGetValues 所示）

function getValue() {
    var Items = "";
    var td1 = [...document.querySelectorAll(".displayarea")].map(e => e.innerHTML);
    var td2 = [...document.querySelectorAll(".displayarea1")].map(e => e.innerHTML);
    var td3 = [...document.querySelectorAll(".displayarea2")].map(e => e.innerHTML);
    var td4 = [...document.querySelectorAll(".displayarea3")].map(e => e.innerHTML);
    var td5 = [...document.querySelectorAll(".displayarea4")].map(e => e.innerHTML);

    for (var i = 0; i < td1.length; i++) {
        if (td1[i])
            Items += td1[i] + " ,";
        if (td2[i])
            Items += td2[i] + " ,";
        if (td3[i])
            Items += td3[i] + " ,";
        if (td4[i])
            Items += td4[i] + " ,";
        if (td5[i])
            Items += td5[i] + " ";
        Items += "\n";

    }
    console.log(Items);
    return Items;
}

function display() {
    const template = document.getElementById("row");
    const clone = template.content.cloneNode(true);
    const additem = (dest, src) => {
        const s = document.querySelector(src);
        clone.querySelector(dest).innerHTML = s.value;
        s.value = "";
    };
    additem(".displayarea", "#fname");
    additem(".displayarea1", "#lname");
    additem(".displayarea2", "#sname");
    additem(".displayarea3", "#pname");
    additem(".displayarea4", "#jname");
    template.insertAdjacentElement('beforebegin', clone.firstElementChild);
}

// IMHO this is better
function alternateGetValue() {
    const Items = [...document.querySelectorAll('.data')]
        .map(row => [...row.querySelectorAll('td>div')]
            .map(d => d.textContent).join(',')
        ).join('\n');
    console.log(Items);
    return Items;
}

.wide {
  min-width:12em;
}

F: <input id="fname"> <br>
L: <input id="lname"> <br>
S: <input id="sname"> <br>
P: <input id="pname"> <br>
J: <input id="jname"> <br>
<input type="button" value="add" onclick="display()"/>
<input type="button" value="show" onclick="getValue()"/>
<input type="button" value="Better" onclick="alternateGetValue()"/>
<table width="400px" align="center" colspan="40" table border="5">
  <thead>
    <tr style="background-color:#8FBC8F;" id='header'>
        <td align="center"><b>Name</b></td>
        <td align="center"><b>Company</b></td>
        <td align="center" class="wide"><b>Time In</b></td>
        <td align="center" class="wide"><b>Time Out</b></td>
        <td align="center"><b>Description of Work</b></td>
    </tr>
  </thead>
  <tbody>
    <template id="row">
        <tr style="background-color:#8F8FBC;" class="data">
            <td align="center"><div class="displayarea"></div></td>
            <td align="center"><div class="displayarea1"></div></td>
            <td align="center"><div class="displayarea2"></div></td>
            <td align="center"><div class="displayarea3"></div></td>
            <td align="center"><div class="displayarea4"></div></td>
        </tr>
    </template>
  </tbody>
</table>

Answer 3

我强烈建议您开始将数据与数据的呈现方式分开。

因此，将您的 display 函数拆分为两个：createRow 和 renderRows。同样，getValues 可以只是 getRows.

请注意，这需要在您的代码中采用不同的处理方式，因此我还重构了您的 HTML 和 CSS 以使其更符合现代方法。

function getRows(data) {
  return data.map(datum => Object.values(datum).join(',')).join('\n');
}

function createRow(data) {
  const datum = {
    fname: document.getElementById("fname").value,
    lname: document.getElementById("lname").value,
    sname: new Date(document.getElementById("sname").valueAsNumber).toLocaleString(),
    pname: new Date(document.getElementById("pname").valueAsNumber).toLocaleString(),
    jname: document.getElementById("jname").value
  };
  data.push(datum);
  document.getElementById("dataForm").reset();
  renderRows(data);
}

function renderRows(data) {
  const body = document.getElementById("renderedData");
  body.innerHTML = "";
  for (let datum of data) {
    let tr = document.createElement('tr');
    let tdFName = document.createElement('td');
    tdFName.appendChild(document.createTextNode(datum.fname));
    tr.appendChild(tdFName);
    let tdLName = document.createElement('td');
    tdLName.appendChild(document.createTextNode(datum.lname));
    tr.appendChild(tdLName);
    let tdSName = document.createElement('td');
    tdSName.appendChild(document.createTextNode(datum.sname));
    tr.appendChild(tdSName);
    let tdPName = document.createElement('td');
    tdPName.appendChild(document.createTextNode(datum.pname));
    tr.appendChild(tdPName);
    let tdJName = document.createElement('td');
    tdJName.appendChild(document.createTextNode(datum.jname));
    tr.appendChild(tdJName);
    body.appendChild(tr);
  }
}
window.addEventListener('load', () => {
  const data = [];
  document.getElementById('add').addEventListener('click', function(e) {
    createRow(data);
  });
  document.getElementById('getData').addEventListener('click', function(e) {
    console.log(getRows(data));
  });
});

form {
  width: max-content;
  margin: 0 auto 1rem;
}
.control-group {
  display: flex;
  justify-content: space-between;
}
fieldset {
  display: flex;
  flex-flow: column nowrap;
}

fieldset button {
  align-self: flex-end;
}

<form id="dataForm">
  <fieldset>
    <legend>Enter Data</legend>
    <div class="control-group">
      <label for="fname">Name:</label>
      <input id="fname" type="text">
    </div>
    <div class="control-group">
      <label for="lname">Company:</label>
      <input id="lname" type="text">
    </div>
    <div class="control-group">
      <label for="sname">Time In:</label>
      <input id="sname" type="datetime-local">
    </div>
    <div class="control-group">
      <label for="pname">Time Out:</label>
      <input id="pname" type="datetime-local">
    </div>
    <div class="control-group">
      <label for="jname">Description of Work:</label>
      <textarea id="jname"></textarea>
    </div>
    <button type="button" id="add">Add</button>
  </fieldset>
</form>
<table width="400px" align="center" colspan="40" table border="5">
  <thead>
    <tr style="background-color:#8FBC8F;" id='header'>
      <td align="center"><b>Name</b></td>
      <td align="center"><b>Company</b></td>
      <td align="center"><b>Time In</b></td>
      <td align="center"><b>Time Out</b></td>
      <td align="center"><b>Description of Work</b></td>
    </tr>
  </thead>
  <tbody id="renderedData">
  </tbody>
</table>
<button type="button" id="getData">Get Data</button>

HTML/JS 输出 table 不显示水平边框

HTML/JS output table not showing horizontal borders

html

javascript

css

html-table