Javascript 在其他单元格之间共享表格单元格HTML5
我不确定问我想要答案的问题的最佳方式,但我会尽我最大的努力。请让我知道,如果我不清楚或你需要更多的信息了解我想要实现什么 目前,我有两个表,一个包含人名(由person1、person2表示),另一个包含注释部分。请看这里: 守则: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>
<!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> Person1</div></td>
<td id="cell2"><div> Person2</div></td>
</tr>
<tr>
<td id="cell5"><div> Person3</div></td>
<td id="cell6"><div> Person4</div></td>
</tr>
<tr>
<td id="cell9"><div> Person5</div></td>
<td id="cell10"><div> Person6</div></td>
</tr>
</tbody>
</table>
<table width="300" border="1" id="commentfield">
<tbody>
<tr>
<td id="comment"><div contenteditable> 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次?