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

我不确定询问问题的最佳方式是否希望答案能达到，但我会尽力。如果我不清楚，请告诉我，或者您需要更多的信息来了解我想达到的目标。在其他单元格之间共享表格单元格HTML5

目前，我有两个表，一个包含人名（由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别人点击，我不t想要显示person1的评论，但我希望该人员能够为person2添加新的评论。但是，例如，我再次点击person1时，我想要添加到人的评论被显示在注释部分。

小场景：

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

注：的commentfield细胞是可编辑的，因此允许人写的东西

这

一种方法是，节省了每个人的分配给他们一个变量评论基于说不定小区ID和装载将变量值返回到注释部分。

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

来源

2016-02-01 Henry

你需要存储一些注释，例如：，一个MySQL数据库。通常情况下，您需要一些像PHP这样的语言的服务器端脚本。除了HTML，CSS和JavaScript之外，您还需要学习PHP，MySQL中的一些基础知识。 –

将不可能将评论存储在分配给该人的变量内。例如person1comment =“我是person1” – Henry

@Henry如果您希望用户从Web访问它们（使用服务器端语言，如PHP，NodeJS等），则需要将这些变量存储在服务器上。示例：如果您只是将其存储在客户端，则其他用户（来自其他客户端）将无法与这些变量交互，只要您不在互联网上发送它并共享它。更多信息：http：//programmers.stackexchange.com/questions/171203/what-are-the-differences-between-server-side-and-client-side-programming – enguerranws

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

他们会帮助触发至极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>

来源

2016-02-01 14:37:43

嗨，这是我想要的。但是，您的意思是（CSSS或JS）？ – Henry

另外，例如说，如果我有很多行/列采取这种方法不会是一个好主意，是吗？ – Henry

@Henry我不知道，contenteditable应该看到它打开时不必向下滚动页面 –

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

回答

相关问题