这是事实; 我只是使用 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 日更新
我想我已经找到了问题的一部分。正如我向另一位用户解释的那样,我有一个到 <tr> 标记的表格,然后我通过 javascript 动态添加其余的表格数据。刚刚查看了代码,直到 <tr> 标记,它被“硬编码”到 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">
<!-- 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';
我正在尝试为通过表单输入的数据设置边框详细信息,正是这些后一种表单值。