Question

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

目前，我有两个表，其中一个包含人名（由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中切换注释部分（注释字段）。

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

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

小方案：

屏幕截图1是该应用目前的样子。屏幕上带有橙色边框的屏幕截图显示有人点击了人并添加了评论。屏幕上显示绿色边框表示有人点击了人并添加了评论。屏幕上有黄色边框表示有人点击了person1并显示为person1添加的评论，然后他们点击了person2并显示为person2添加的评论。最后一个屏幕截图显示person2评论已被编辑，现在如果有人点击此评论，则会看到新评论。

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

这样做的一种方法是，根据可能的单元格id将每个人的注释保存在分配给它们的变量中，并将变量值加载到注释部分。

对编程知之甚少，我不知道如何做到这一点，欢迎任何帮助。

Answer 1

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

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

here a CSS example of the idea

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

在其他单元格之间共享表格单元格HTML5

1 个答案: