如何让评论显示在线程下

Question

我正在尝试创建一个论坛，用户可以通过填写带有名称和消息的表单来创建线程，人们可以通过单击 cmets 按钮（更多）来评论每个线程帖子，该按钮会打开线程帖子下方的所有 cmets，然后提交评论表单。

目前我正在使用一个表格来显示所有线程帖子和 cmets，问题是当我单击更多 cmets 按钮时，它会在新表格列的一侧打开 cmets，但我希望它在线程帖子下方打开。我尝试将 cmets 放在下面的新表格行中，但这不起作用。因此，所有 cmets 都需要显示在主题帖子下方，并且所有 cmets 下方将是一个表单，用户可以填写该表单以提交评论。

这是现在的样子：https://imgur.com/AAcPezQ

function comment() {
  var table = document.getElementById("comments");
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var name = document.getElementById("name").value;
  var message = document.getElementById("message").value;
  cell1.innerHTML = name;
  cell2.innerHTML = message;
}

function add() {
  var table = document.getElementById("masterTable");
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var name = document.getElementById("name").value;
  var message = document.getElementById("message").value;
  cell1.innerHTML = name;
  cell2.innerHTML = message;
}



function toggle_visibility(id) {
  var btn = document.getElementById('commentBtn');

  var e = document.getElementById(id);
  if (e.style.display == 'block') {
    e.style.display = 'none';
    btn.innerHTML = "More";
  } else {
    e.style.display = 'block';
    document.getElementById("commentBtn").value = "Less";
    btn.innerHTML = "Less";
  }
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<h1>Test</h1>
<table id="masterTable">
  <tr>
    <th>Name</th>
    <th>Message</th>
    <th>Comments</th>
  </tr>
  <tr>
    <td>Tiago</td>
    <td>Hello how are you?</td>
    <td><button id="commentBtn" onclick="toggle_visibility('comments');">More</button></td>
    <td id="comments" style="display: none;">
      <p>TestComment1</p>
      <p>TestComment2</p>
      <form>
        <h4>Submit a comment</h4>
        <input type="text" id="name" placeholder="name">
        <input type="text" id="message" placeholder="message">
        <button type="submit" onClick='comment()' id='button'>Submit</button>
      </form>
    </td>
  </tr>
  <tr>
    <td>Comment Name should display here</td>
    <td>Comment message should display here</td>
    <td></td>
  </tr>
</table>
</div>
<br/><br/>
<form>
  <h2>Submit a message</h2>
  <input type="text" id="name" placeholder="name">
  <input type="text" id="message" placeholder="message">
  <button type="submit" onClick='add()' id='button'>Submit</button>
</form>

所以我需要的结果是，如果用户点击更多按钮，那么所有 cmets 将显示在帖子下方而不是帖子右侧。

Answer 1

您确实为消息和评论复制/粘贴了相同的功能和表单无法正常工作。

如果在一种情况下添加一行，在另一种情况下，您想在容器中添加文本。

你需要创建一个不同的 HTML 结构，你可以在 table 中添加一行，但是对于 cmets，一个带有文本的 div 就足够了。

以下是您的代码示例。

首先我在表单顶部添加了一个容器来接收评论，我重命名了 id，所以它们只有一个。

对于演示，我添加了 return false; onclick for the button ，在使用前将其删除。

function comment() {
  var name = document.getElementById("name1").value;
  var message = document.getElementById("message1").value;
  var newDIV = document.createElement("blockquote"); // create the tags you think most appropriate
  var newp1 = document.createElement("cite");
  var newp2 = document.createElement("q");
  var text1 = document.createTextNode(name);
  var text2 = document.createTextNode(message);
  newp1.appendChild(text1);
  newp2.appendChild(text2);
  newDIV.appendChild(newp1);
  newDIV.appendChild(newp2);
  var newcom = document.getElementById("com");
  newcom.appendChild(newDIV);
}

function add() {
  var table = document.getElementById("masterTable");
  var row = table.insertRow(-1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var name = document.getElementById("name").value;
  var message = document.getElementById("message").value;
  cell1.innerHTML = name;
  cell2.innerHTML = message;
}



function toggle_visibility(id) {
  var btn = document.getElementById('commentBtn');

  var e = document.getElementById(id);
  if (e.style.display == 'block') {
    e.style.display = 'none';
    btn.innerHTML = "More";
  } else {
    e.style.display = 'block';
    document.getElementById("commentBtn").value = "Less";
    btn.innerHTML = "Less";
  }
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

cite {
  font-weight: bold;
  padding-right: 1em;
}

.comments {
  display: flex;
}

#commentBtn {
  margin: auto 0.5em;
}

<h1>Test</h1>
<table id="masterTable">
  <tr>
    <th>Name</th>
    <th>Message</th>
    <th>Comments</th>
  </tr>
  <tr>
    <td>Tiago</td>
    <td>Hello how are you?</td>
    <td class="comments"><button id="commentBtn" onclick="toggle_visibility('comments');">More</button>
      <div id="comments" style="display: none;">
        <div id="com">
          <p>TestComment1</p>
          <p>TestComment2</p>
        </div>
        <h4>Submit a comment</h4>
        <form>
          <input type="text" id="name1" placeholder="name">
          <input type="text" id="message1" placeholder="message">
          <button onClick='comment();return false;' id='button'>Submit</button>
        </form>
      </div>
    </td>
  </tr>
  <tr>
    <td>Comment Name should display here</td>
    <td>Comment message should display here</td>
    <td></td>
  </tr>
</table>
</div>
<br/><br/>
<form>
  <h2>Submit a message</h2>
  <input type="text" id="name" placeholder="name">
  <input type="text" id="message" placeholder="message">
  <button onClick='add();return false;' id='button'>Submit</button>
</form>

我希望这对您的 js 部分有所帮助，您仍然缺少新消息的注释部分和每条消息的 cmets 表单，那么您还需要将其存储在服务器端。祝你好运。