javascript - 通过javascript更改CSS类中的td

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

现在我可以设置外部表格颜色，增加内部表格的宽度并将其向下移动，因为我正在影响 table 标签本身，因此:

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，因为页面上还有其他不受影响的类/ID。

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

+++ 11 月 14 日更新

我想我已经找到了部分问题。 正如我向另一位用户解释的那样，我有一个直到 标记的表格，然后我通过 javascript 动态添加表格数据的其余部分。刚刚查看了代码，一直到 标记，它都被“硬编码”到 HTML 页面中，(并通过 visibility:hidden 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">
<!-- text appears here-->
</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()，它创建了一个具有该类名的对象数组。