在其他单元格之间共享一个表格单元格 HTML5答案

【问题标题】：Sharing a table cell between other cells HTML5在其他单元格之间共享一个表格单元格 HTML5
【发布时间】：2016-05-09 22:13:48
【问题描述】：

我不确定提出我想回答的问题的最佳方式，但我会尽力而为。如果我不清楚，或者您需要更多信息来了解我想要实现的目标，请告诉我。

目前，我有两个表，其中一个包含人名（由 person1、person2 .... 表示）和另一个评论部分。请看这里：https://dl.dropboxusercontent.com/u/53441658/peoplecomment.html。

代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PersonComment</title>
</head>

<script> 

function toggleTable() {
    var myTable = document.getElementById("commentfield");
    myTable.style.display = (myTable.style.display == "table") ? "none" : "table";
    }

</script>

<body>
<table width="300" border="1" id="people" onClick="toggleTable()">
  <tbody>
    <tr>
      <td id="cell1"><div>&nbsp;Person1</div></td>
      <td id="cell2"><div>&nbsp;Person2</div></td>
    </tr>
    <tr>
      <td id="cell5"><div>&nbsp;Person3</div></td>
      <td  id="cell6"><div>&nbsp;Person4</div></td>
    </tr>
    <tr>
      <td id="cell9"><div>&nbsp;Person5</div></td>
      <td  id="cell10"><div>&nbsp;Person6</div></td>
    </tr>
  </tbody>
</table>
<table width="300" border="1" id="commentfield">
  <tbody>
    <tr>
    <td id="comment"><div contenteditable>&nbsp;Your comment here</div></td>
    </tr>
  </tbody>
</table>
</body>
</html>

第一个表中的每个单元格，包含人名，都包含一个函数，用于打开和关闭表 2 的评论部分（commentfield）。

此表的目的 当用户单击单元格时，它应该允许他们在评论部分中添加评论并将该评论与他们单击的单元格绑定，并且在单击时不确定该评论是否在另一个单元格上。

我想要达到的目标： 我想在所有人之间共享评论部分，例如，如果有人点击 person1 并发表评论，然后其他人点击 person2，我不想显示 person1 的评论，而是想要能够为 person2 添加新评论的人。但是，例如，当我再次单击 person1 时，我希望添加到 person 的评论显示在评论部分。

小场景：

屏幕截图 1 是应用当前的外观。带有橙色边框的屏幕截图表明有人点击了人员并添加了评论。带有绿色边框的屏幕截图表明有人点击了此人并添加了评论。带有黄色边框的屏幕截图显示有人点击了 person1 并显示了为 person1 添加的评论，然后他们点击了 person2 并显示了为 person2 添加的评论。最后一个截图显示 person2 的评论已经被编辑，现在如果有人点击它就会看到新的评论。

注意：评论区单元格是可编辑的，因此允许人们写东西

其中一种方法是，将每个人的评论保存在根据单元格 ID 分配给他们的变量中，并将变量值加载回评论部分。

几乎没有编程知识，我不知道如何做到这一点，欢迎任何帮助。

【问题讨论】：

您需要将 cmets 存储在某个地方，例如 MySQL 数据库。通常，您需要使用 PHP 等语言编写一些服务器端脚本。除了 HTML、CSS 和 JavaScript，你还需要学习一些 PHP、MySQL 的基础知识。
不可能将 cmets 存储在分配给该人的变量中。例如person1comment = "我是 person1"
@Henry 如果您希望用户从 Web 访问这些变量（使用服务器端语言，例如 PHP、NodeJS 等），您需要将这些变量存储在服务器上。示例：如果您只是将其存储在客户端，则其他用户（来自其他客户端）将无法与这些变量进行交互，只要您不将其发送并在 Internet 上共享。更多信息：programmers.stackexchange.com/questions/171203/…
没关系，因为这是我正在学习 Web 开发的测试项目。

标签： javascript jquery css html html-table

【解决方案1】：

您可以包含表单标签并使用它们。

它们将有助于触发 contenteditable 被看到（CSSS 或 JS）

here a CSS example of the idea

input+div[contenteditable],
input[name="person"] {
  position: absolute;
  right: 9999px;
}
input:checked + div {
  position: static;
}
label {
  /* optionnal*/
  display: block;
}
/* trick to simulate js toggle */

table {
  position: relative;
}
[for="hide"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4.7em;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 1
}
:checked~[for="hide"] {
  pointer-events: auto;
}

<form>
  <table width="300" border="1" id="people" onClick="toggleTable()">
    <tbody>
      <tr>
        <td id="cell1">
          <div>
            <!-- was the div usefull here ? if not; it can be avoided -->
            <label for="c1">Person1</label>
          </div>
        </td>
        <td id="cell2">
          <div>
            <label for="c2">Person2</label>
          </div>
        </td>
      </tr>
      <tr>
        <td id="cell5">
          <div>
            <label for="c3">Person3</label>
          </div>
        </td>
        <td id="cell6">
          <div>
            <label for="c4">Person4</label>
          </div>
        </td>
      </tr>
      <tr>
        <td id="cell9">
          <div>
            <label for="c5">Person5</label>
          </div>
        </td>
        <td id="cell10">
          <div>
            <label for="c6">Person6</label>
          </div>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td id="comment" colspan="2">
          <input type="radio" id="c1" name="person" />
          <div contenteditable id="p1">&nbsp;Your comment here person 1</div>
          <input type="radio" id="c2" name="person" />
          <div contenteditable id="p2">&nbsp;Your comment here person 2</div>
          <input type="radio" id="c3" name="person" />
          <div contenteditable id="p3">&nbsp;Your comment here person 3</div>
          <input type="radio" id="c4" name="person" />
          <div contenteditable id="p4">&nbsp;Your comment here person 4</div>
          <input type="radio" id="c5" name="person" />
          <div contenteditable id="p5">&nbsp;Your comment here person 5</div>
          <input type="radio" id="c6" name="person" />
          <div contenteditable id="p6">&nbsp;Your comment here person 6</div>
          <label for="hide"></label>
          <input type="radio" id="hide" name="person" />
        </td>
      </tr>
    </tfoot>
  </table>
</form>

【讨论】：

嗨，这就是我想要的。但是，你说的（CSSS 还是 JS）是什么意思？
另外，比如说，如果我有很多行/列采用这种方法不是一个好主意，不是吗？
@Henry 我不知道，contenteditable 在打开时应该可以看到，无需向下滚动页面
@Henry 我的意思是你应该通过 js 设置这种行为，而不仅仅是 CSS 不是真正的意思，javascript 是。 CSS 是为快速演示而设置的；）
嗨@gcyrillus，你看到目前你有
你在此处的评论 person 1
为每个人，但是如果我有更多的单元格说示例 50 是否有其他方法可以做到这一点，或者我需要写
Your comment here person 1
50 次？