javascript - 显示:inline-block on table elements is inconsistent between browsers

Question

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

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

所有 4 行都是表单的一部分，这很好，因为它们可以为空。

我的代码如下:

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

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

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

它可以在 IE 中运行..令人惊讶的是..

但是似乎在 Chrome 中不起作用。它奇怪地使行与其他行不一致:

有人知道 Chrome 为何以这种方式显示表格吗？

谢谢

Answer 1

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

我还添加了 width="120"来固定列的宽度，但不是很有必要。

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

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

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

<小时/>

解决方案 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>