Question

这是事实;我只是使用CSS和Javascript“过来”，通常可以找到问题的解决方案......但这让我很难过。

我已经设置了这个类......

 .pop_close{ outer table data here}
 .pop_close td{ outer table cell data here}
 .pop_form{ table data here}
 .pop_form td{ table cell data here}

<table class="pop_close" id="101"><tr><td>CLOSE X</td></tr>
<tr><td>
<table class="pop_form" id="102">
<tr><td>DATA HERE ....

现在我可以设置外部表格颜色，增加内部表格的宽度并将其向下移动到屏幕上，因为我正在影响表格标记本身：

document.getElementById('101').style.backgroundColor='red'
document.getElementById('101').style.top=top+'px';
document.getElementById('102').style.width=width+'px';
document.getElementById('102').style.height=height+'px';

但是如何更改“pop_form”的单元格数据呢？（在第四行的CSS中，在td标记之前有空格）我无法将所有td设置为一个类/ ID，因为页面上的其他内容不受影响。

它实际上是一个弹出窗体，用户可以在关闭按钮旁边指定自己的外边框颜色，并设置内部表格的宽度和边框样式，然后在屏幕上显示结果。但设置内部表格边框让我感到难过。（在你告诉我之前，是的，我知道它对窝桌不满意，但这是我知道的最简单的布局方法！）

+++ 11月14日更新

我想我已经找到了部分问题。正如我向另一位用户解释的那样，我有一张表到＆lt; tr＆gt;标签，然后我通过javascript动态添加其余的表数据。刚刚查看代码，直到＆lt; tr＆gt;标签，它被“硬编码”到HTML页面中，（并隐藏着可见性：隐藏的CSS）所以JS可以“看到”这个，并且能够操纵它。然而，表的内部是在 JS中生成，所以实际上它无法看到它来改变它，（这是我的假设）它仍然可以将其类数据“拉”到表中，因为CSS是再次成为主页的一部分，但我要求javascript操纵自己的数据。为清楚起见，我展示了以下代码：

<span style="position:fixed;top:20px;height:100%;width:100%;visibility:hidden;pointer-events:none;z-index:10;" id="101"> <table cellspacing="0" align="center" class="pop_close" id="103"> <tr><td align="right"> <a href="javascript:void[0];" onclick="HidePop('101');" style="pointer-events:auto">CLOSE</a></td></tr> <tr><td> <table cellspacing="0" align="center" class="pop_form" id="102">  </table> </td></tr> </table> </span>

以上是硬编码的。然后，在javasript我添加：

form[0]='<tr><td valign="top">'+str+'</td></tr>\\n'; form[1]='<tr><td valign="top">'+str+'<br><br>'+bot_code+'</td></tr>\\n'; form[2]='<tr><td valign="top"><img src="%prod_img%">\\n</td>\\n<td valign="top">\\n'+str+'</td>\\n</tr>\\n<tr>\\n<td colspan="2">\\n<center>\\n'+bot_code+'\\n</center>\\n</td>\\n</tr>\\n'; form[3]='<tr><td valign="top"><img src="%prod_img%">\\n</td>\\n<td valign="top" id="pf_td>\\n'+str+'<br><br>\\n<center>\\n'+bot_code+'\\n</center>\\n</td>\\n</tr>\\n'; form[4]='<tr><td valign="top">'+str+'</td>\\n<td valign="top">\\n<img src="%prod_img%">\\n</td>\\n</tr>\\n<tr>\\n<td colspan="2">\\n<center>\\n'+bot_code+'\\n</center>\\n</td>\\n</tr>\\n'; form[5]='<tr><td valign="top">'+str+'<br><br>\\n<center>\\n'+bot_code+'\\n</center>\\n</td>\\n<td valign="top">\\n<img src="%prod_img%">\\n<//td>\\n</tr>\\n';

这是后面的表单值，我正在尝试通过表单输入的数据设置边框详细信息。

Answer 1

是否有多个嵌套表，101..102..103..10n，还是只有这两个？

如果只有两个，我很好奇为什么你不会只使用ID而不是类。

您可以查看document.getElementsByClassName()，它会创建一个具有该类名称的对象数组。

Answer 2

我设法解决了这个问题。

内在＆lt; td＆gt;标签我给了一个“pop”的类名，（即那里的“DATA HERE”）

然后我使用javascript动态设置id为“102”的表格的宽度，高度和背景颜色

接下来，我使用了“document.getElementById（'pop'）。innerHTML = DATA HERE”;将文本“注入”表格单元格。并将表格移到屏幕上......我移动了整个屏幕上的标签

通过javascript更改CSS类中的td

2 个答案: