如何获取注释以显示在线程下

Question

我正在尝试创建一个论坛，用户可以在该论坛中填写姓名和消息来创建话题，然后人们可以通过单击评论按钮（更多）对每个话题发表评论，这将打开该话题下方的所有评论，然后提交评论表格。

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

这是现在的样子：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>

因此，我需要的结果是，如果用户单击更多按钮，则所有评论将显示在帖子的下方，而不是帖子的右侧。

Answer 1

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

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

您需要创建一个不同的HTML结构，可以向表中添加一行，但是对于注释来说，其中包含文本的div就足够了。

下面是您代码中的一个示例。

首先，我在表单顶部添加了一个用于接收评论的容器，我将ID重命名为仅一个。

对于演示，我添加了return false;在onclick按钮上，在使用前将其删除。

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部分有帮助，您仍然缺少新消息的注释部分和每条消息的注释表单，然后，您还需要将其存储在服务器端。祝你好运。