HTML / JS / CSS问题本身变得越来越大

时间:2010-06-15 23:14:14

标签: jquery html css

http://img175.imageshack.us/img175/4295/tableissue.png http://img175.imageshack.us/img175/4295/tableissue.png

这是图片的开头。

我有这个复选框,当你检查时,然后使用jQuery toggle();它隐藏在图片的前半部分(#writeComment),并显示#SCtryVOTE(你在另一半图片中看到的,在右边)。

现在我不知道为什么但是由于某些原因它在检查时会扩展,为什么我不知道,是因为它需要更多的地方而不是它或?如何在检查时没有问题地完成这项工作。

这是编码:

$('#tryout').click(function () {

    $('#writeComment').toggle(!$(this).attr('checked'));

    $('#SCtryVOTE').toggle($(this).attr('checked'));
});

js jquery脚本部分,继承表和divs HTML部分:

<input type="checkbox" id="tryout">
<table  align="center" width="400" cellpadding="0" cellspacing="1" id="theBoxer">
<tr style="background: #686868;">
<td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td>
<td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td>
</td>
</tr>
<tr>
<td align="left" valign="top" width="70" height="112" style="">
TEST
</td>
<td align="left" valign="top" width="70" height="112" style="">
<div id="writeComment">
Smid en kommentar:<br>
<form action="javascript:DoInsert()" method="post">
<textarea id="kommentar" name="kommentar"></textarea><br />
<input type="hidden" name="fID" id="fID" value="<? echo $_GET["id"]; ?>">
<input type="submit" name="Submit" value="Sæt ind!"> 
</form>
</div>

<div id="SCtryVOTE"  style="display: none;">
<form onsubmit="if (!this.comment.cleared) clearContents( document.getElementById('comment') ); return true;" action="javascript:DoSCInsert()" method="post">
<textarea onfocus=" javascript:clearContents(this); this.cleared=true;" rows="5" cols="40" id="comment" name="comment" <?php if($vis["username"] == $pusername) { echo "DISABLED"; } ?>>Tryk for at skrive. Skal være detaljeret og grundet.</textarea>
<br>Ja: <input type="radio" value="Y" id="SCvoteY" name="vote"></input>  Nej: <input type="radio" id="SCvoteN" value="N" name="vote"> </input>
<input type="submit" id="SCstem" name="Submit" value="Stem!"> 
</form>
</div>

对于这两个框,也许你也需要CSS部分:

#writeComment{
position: relative;
left: 5px; 
top: 10px;
}
#SCtryVOTE{
position: relative;
left: 5px; 
top: 10px;
}

2 个答案:

答案 0 :(得分:1)

我认为问题是第一种形式的<textarea>没有指定任何大小,而seconf中的textarea确实指定了rows=""cols=""

此外,增加的垂直偏移可能是由于您隐藏第一个表单的方式。你也可以发布那个脚本代码吗?

答案 1 :(得分:0)

因为我们无法格式化评论

重新 @Franci Penov看看我应该在哪里做这个,哪部分你不了解编码,我会尽力解释我能做到的最好 - Azzyh 1分钟前< / em>的

例如,哪一个更容易看到额外的</td>

缩进(原始代码)

<table  align="center" width="400" cellpadding="0" cellspacing="1" id="theBoxer">
<tr style="background: #686868;">
<td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td>
<td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td>
</td>
</tr>

<强>缩进

<table  align="center" width="400" cellpadding="0" cellspacing="1" id="theBoxer">
    <tr style="background: #686868;">
        <td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">
            Opret
        </td>
        <td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">
            Opret
        </td>
        </td>
    </tr>