显示：表格元素上的内联块在浏览器之间不一致

Question

我有一个评论字段，如果用户想要更多行来撰写评论，我想扩展。

我最多可以拥有4条支持的线路。

所有4行都是表格的一部分，因为它们可以是空白的。

我的代码如下：

＆＃13;

＆＃13;

  $('#addcomment').click(function(){
        $('.hiddenComment').css("display", "inline-block");
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    			<td class="formtitle">Comments</td>
    			<td class="formfield"><input id="inputdesc" name="comments" type="text" size="70" maxlength="60" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span><img id="addcomment" style="vertical-align: text-bottom" src="/files/icons/label.png" /></td>
    		</tr>
    		<tr class="hiddenComment" id="comment2" style="display: none">
    			<td class="formtitle">Comments 2</td>
    			<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
    		</tr>
    		<tr class="hiddenComment" id="comment3" style="display: none">
    			<td class="formtitle">Comments 3</td>
    			<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
    		</tr>
    		<tr class="hiddenComment" id="comment4" style="display: none">
    			<td class="formtitle">Comments 4</td>
    			<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
    		</tr>

＆＃13;

＆＃13;

＆＃13;

因此，当单击该按钮时，它应显示额外的行。

适用于IE ..令人惊讶..

但似乎无法在Chrome中使用。奇怪的是，这些行与其他行不一致：

有没有人对Chrome为何以这种方式显示表格有任何想法？

由于

Answer 1

您可以使用jquery函数'.show()'和'.hide()'

我还添加了width =＆＃34; 120＆＃34;修复列的宽度，但不是很必要。

＆＃13;

＆＃13;

$('.formtitle, .formfield').hide();
$('.base, .hiddenComment').show();

	 $('#addcomment').click(function(){
        $('.formtitle, .formfield').show();
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
			<tr>
    			<td class="formtitle base" width="120">Comments</td>
    			<td class="formfield base"><input id="inputdesc" name="comments" type="text" size="70" maxlength="60" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span><img id="addcomment" style="vertical-align: text-bottom" src="/files/icons/label.png" /></td>
    		</tr>
    		<tr class="hiddenComment" id="comment2" style="display: none">
    			<td class="formtitle">Comments 2</td>
    			<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
    		</tr>
    		<tr class="hiddenComment" id="comment3" style="display: none">
    			<td class="formtitle">Comments 3</td>
    			<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
    		</tr>
    		<tr class="hiddenComment" id="comment4" style="display: none">
    			<td class="formtitle">Comments 4</td>
    			<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
    		</tr>
			
</table>	

＆＃13;

＆＃13;

＆＃13;

解决方案2：

您可以尝试使用此代码进行显示并隐藏点击：

<script>
$('.formtitle, .formfield').hide();
$('.base, .hiddenComment').show();

var view=false;
$('#addcomment').click(function(){
    view = !view;
    if(view){
       $('.formtitle, .formfield').show();
    }
    else{
        $('.formtitle, .formfield').hide();
        $('.base, .hiddenComment').show();
    }
});
</script>

解决方案3：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
                <tr>
                    <td class="formtitle" width="120">Comments</td>
                    <td class="formfield"><input id="inputdesc" name="comments" type="text" size="70" maxlength="60" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span><img id="addcomment" style="vertical-align: text-bottom" src="/files/icons/label.png" /></td>
                </tr>
                <tr class="hiddenComment" id="comment2" style="display: none">
                    <td class="formtitle">Comments 2</td>
                    <td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
                </tr>
                <tr class="hiddenComment" id="comment3" style="display: none">
                    <td class="formtitle">Comments 3</td>
                    <td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
                </tr>
                <tr class="hiddenComment" id="comment4" style="display: none">
                    <td class="formtitle">Comments 4</td>
                    <td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
                </tr>

    </table>    

<script>
 $('.hiddenComment').show();
 $('.hiddenComment > td').hide();

        var view=false;
        $('#addcomment').click(function(){
            view = !view;

            if(view){
               $('.hiddenComment > td').show();
            }
            else{
                $('.hiddenComment > td').hide();
            }
        });
</script>