Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/68.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在其他单元格之间共享表格单元格HTML5_Javascript_Jquery_Css_Html_Html Table - Fatal编程技术网

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

Javascript 在其他单元格之间共享表格单元格HTML5,javascript,jquery,css,html,html-table,Javascript,Jquery,Css,Html,Html Table,我不确定问我想要答案的问题的最佳方式,但我会尽我最大的努力。请让我知道,如果我不清楚或你需要更多的信息了解我想要实现什么 目前,我有两个表,一个包含人名(由person1、person2表示),另一个包含注释部分。请看这里: 守则: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>PersonComment</title> </head>

我不确定问我想要答案的问题的最佳方式,但我会尽我最大的努力。请让我知道,如果我不清楚或你需要更多的信息了解我想要实现什么

目前,我有两个表,一个包含人名(由person1、person2表示),另一个包含注释部分。请看这里:

守则:

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

个人推荐
函数切换表(){
var myTable=document.getElementById(“commentfield”);
myTable.style.display=(myTable.style.display=“表格”)?“无”:“表格”;
}
人1
人2
人3
人4
人5
人6
你的评论在这里
第一个表中包含人名的每个单元格都包含一个函数,该函数在注释部分(commentfield)中切换表2的开关

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

我想要实现的目标: 我想在所有人之间共享评论部分,比如说,如果有人单击person1并发表评论,然后其他人单击person2,我不想显示person1的评论,而是希望此人能够为person2添加新的评论。然而,例如,当我再次单击person1时,我希望添加到person的注释显示在注释部分

小场景:

屏幕截图1是应用程序当前的样子。 带有橙色边框的屏幕截图显示有人点击了此人并添加了评论。 带有绿色边框的屏幕照片显示有人点击了此人并添加了评论。 带有黄色边框的屏幕照片显示有人单击person1并显示为person1添加的评论,然后单击person2并显示为person2添加的评论。 最后一个屏幕截图显示person2评论已经被编辑,现在如果有人点击它,就会看到新的评论

注: commentfield单元格是可编辑的,因此允许人们编写内容

其中一种方法是,将每个人的注释保存在根据单元格id分配给他们的变量中,并将变量值加载回注释部分


由于对编程知之甚少,我不知道如何才能做到这一点,欢迎提供任何帮助。

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

它们将有助于触发可查看的内容(CSS或JS)


input+div[contenteditable],
输入[name=“person”]{
位置:绝对位置;
右:9999px;
}
输入:选中+div{
位置:静态;
}
标签{
/*可选的*/
显示:块;
}
/*模拟js切换的技巧*/
桌子{
位置:相对位置;
}
[for=“hide”]{
位置:绝对位置;
排名:0;
左:0;
右:0;
高度:4.7em;
背景:rgba(0,0,0,0.2);
指针事件:无;
z指数:1
}
:选中~[for=“hide”]{
指针事件:自动;
}

人1
人2
人3
人4
人5
人6
你在这里的评论第1人
你的评论在这里第二个人
你在这里的评论第三人
你在这里的评论第4个人
你在这里的评论第5个人
你在这里的评论

您需要将注释存储在某个地方,例如MySQL数据库。通常,您需要使用PHP之类的语言编写一些服务器端脚本。除了HTML、CSS和JavaScript之外,您还需要学习PHP、MySQL的一些基础知识。难道不可能将注释存储在分配给此人的变量中吗。e、 g.person1comment=“I am person1”@Henry如果希望用户从web访问这些变量(使用服务器端语言,如PHP、NodeJS等),则需要将这些变量存储在服务器上。示例:如果您只是将其存储在客户端,那么其他用户(来自其他客户端)将无法与这些变量交互,只要您不将其发送并在Internet上共享。更多信息:这很好,因为这是我学习web开发的测试项目。嗨,这就是我想要的。然而,你所说的(CSSS或JS)是什么意思?也就是说,如果我有很多行/列,那么采用这种方法不是个好主意,是吗?@Henry,我不知道,contenteditable在打开时应该可以看到,而不必向下滚动屏幕page@Henry我的意思是你应该通过js来设置这个行为,而不仅仅是CSS wich并不是这个意思,javascript也是。CSS已设置为快速演示;)您好@gcyrillus您看到目前您在这里有您的评论每人1人,但是如果我有更多的单元格,比如说50人,是否有其他方法可以这样做,或者我需要在这里写您的评论每人1人50次?