Javascript 表格行未延伸到100%宽度

我在单击定位点时隐藏并显示一个表行，但是当下次显示

tr

时，它并没有延伸到它的全部长度。这是你的电话号码

注意：转到

查看差异

并单击

envariable

这是我的密码

 var dummy1='<list>  <TagResult elementname="osname" subCategory="system" value1="Linux" value2="HP-US1000" isEqual="false"/>  <TagResult elementname="hostname" subCategory="system" value1="estilo" value2="benz" isEqual="false"/>  <TagResult elementname="release" subCategory="system" value1="2.6.18-128.el5" value2="B.11.23" isEqual="false"/><TagResult elementname="version" subCategory="system" value1="Red Hat Enterprise Linux Server release 5.3 (Tikanga)" value2="U" isEqual="false"/>  <TagResult elementname="machine" subCategory="system" value1="x86_64" value2="ia64 hp server rx2600" isEqual="false"/>  <TagResult elementname="bitmode" subCategory="system" value1="64" value2="64" isEqual="true"/>  <TagResult elementname="numberofcpu" subCategory="system" value1="4" value2="2" isEqual="false"/>  <TagResult elementname="cpuspeed" subCategory="system" value1=" 1862.890" value2="1400" isEqual="false"/>  <TagResult elementname="maxfilesperproc" subCategory="system" value1="32" value2=" 32" isEqual="true"/>  <TagResult elementname="maxthreadsperproc" subCategory="system" value1="2000000" value2="                    256  " isEqual="false"/><TagResult elementname="mempagesize" subCategory="system" value1="4096" value2="4096" isEqual="true"/><TagResult elementname="ssaname3webserviceserver" subCategory="product" value1="ssasvck&gt; Attempt 1 at server &apos;null:-1&apos;ssasvck&gt; Server&apos;null:-1&apos; is down" value2="ssasvck&gt; Attempt 1 at server &apos;null:-1&apos;ssasvck&gt; Server &apos;null:-1&apos; is down" isEqual="true"/><TagResult elementname="TERM" subCategory="envVariable" value1="xterm " value2="xterm" isEqual="true"/><TagResult elementname="JAVA_HOME" subCategory="envVariable" value1="/home/hqusers1/IIR_1152825121_estilo_9.0.1SP2_32 " isEqual="false"/><TagResult elementname="SSANUL" subCategory="envVariable" value1="/dev/null " value2="/dev/null" isEqual="true"/><TagResult elementname="SSA_LIHOST" subCategory="envVariable" value1="estilo:45682 " value2="benz:7660" isEqual="false"/><TagResult elementname="SSH_CLIENT" subCategory="envVariable" value1="10.65.6.131 4760 22 " value2="10.65.241.204 367222" isEqual="false"/></list>';

$('#compareForm input:radio').click(function() {
        populateCompare($(this).val());
  });

$('#compareTable a').live('click', function() {
var elementId=$(this).attr("id");
showHiddenTr(elementId);
});
function showHiddenTr(eid)
{
if($(".differentEnvironmentHiddentr").is(':visible'))
{
    $(".differentEnvironmentHiddentr").css({"display":"none"});
}
else
{
    $(".differentEnvironmentHiddentr").css({"display":"block"});
}       
}


function populateCompare(cmp)
{
var mytr = new Array();
var mytrs="";
var i=0;
var xml=dummy1;
$('#compareContent').empty();
$('#compareContent').html("<table width='100%'><tbody><tr><td align='center'>Compare details being loaded</td></tr><tr><td align='center'><img src='/csm/view/include/images/loading.gif' alt='Loading'/></td></tr></tbody></table>");
if(cmp=="all")
{

    $(xml).find('TagResult').each(function(){
        if($(this).attr("isEqual")=="false")
        {
            mytr[i]='<tr class="regulartr">'+
            '<td class="different" align="left">'+$(this).attr("elementname")+'</td>'+
            '<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
            '<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
            '</tr>';
            mytrs+=mytr[i++];
        }
        else
        {
            mytr[i]='<tr class="regulartr">'+
            '<td class="nametd" align="left">'+$(this).attr("elementname")+'</td>'+
            '<td class="value1td" align="left">'+$(this).attr("value1")+'</td>'+
            '<td class="value2td" align="left">'+$(this).attr("value2")+'</td>'+
            '</tr>';
            mytrs+=mytr[i++];
        }

    });


    $('#compareContent').empty();
    $('<div>')
    .html('<table id="compareTable" cellspacing="0" cellpadding="0">'+
            '<thead><tr class="regulartr">'+
                '<th align="center">Name</th>'+
                '<th align="center">Config1</th>'+
                '<th align="center">Config2</th>'+
            '</tr></thead><tbody>'+mytrs

        +'</tbody></table>')
    .appendTo('#compareContent');

} 
if(cmp=="diff")
{
    var env=0;
    $(xml).find('TagResult').each(function(){

        if($(this).attr("isEqual")=="false")
        {
            if($(this).attr("subCategory")=="envVariable")
            {
                if(env==0)
                {
                    mytr[i]='<tr class="regulartr">'+
                    '<td class="different" align="left"><a id="showCmpEnvironment"><img  src="http://pslxcsm01:8080/informaticaCSM/zkau/web/zul/img/tree/close.png"/>'+$(this).attr("subCategory")+'</a></td>'+
                    '<td class="different" align="left"></td>'+
                    '<td class="different" align="left"></td>'+
                    '</tr>';
                    mytrs+=mytr[i++];
                    mytr[i]='<tr class="differentEnvironmentHiddentr">'+
                    '<td class="different" align="left">&nbsp;&nbsp;'+$(this).attr("elementname")+'</td>'+
                    '<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
                    '<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
                    '</tr>';
                    mytrs+=mytr[i++];
                    env=1;
                }
                else
                {


                    mytr[i]='<tr class="differentEnvironmentHiddentr">'+
                    '<td class="different" align="left">&nbsp;&nbsp;'+$(this).attr("elementname")+'</td>'+
                    '<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
                    '<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
                    '</tr>';
                    mytrs+=mytr[i++];
                }
            }
            else
            {
                mytr[i]='<tr class="regulartr">'+
                '<td class="different" align="left">'+$(this).attr("elementname")+'</td>'+
                '<td class="different" align="left">'+$(this).attr("value1")+'</td>'+
                '<td class="different" align="left">'+$(this).attr("value2")+'</td>'+
                '</tr>';
                mytrs+=mytr[i++];
            }



        }


    });


    $('#compareContent').empty();
    $('<div>')
    .html('<table id="compareTable" cellspacing="0" cellpadding="0">'+
            '<thead><tr class="regulartr">'+
                '<th align="center">Name</th>'+
                '<th align="center">Config1</th>'+
                '<th align="center">Config2</th>'+
            '</tr></thead><tbody>'+mytrs

        +'</tbody></table>')
    .appendTo('#compareContent');

} 
}

var dummy1=''；
$（'#compareForm input:radio'）。单击（函数（）{
populateCompare（$（this.val（））；
});
$（'#可比较a'）.live（'单击'，函数（））{
var elementId=$（this.attr（“id”）；
showHiddenTr（elementId）；
});
函数showHiddenTr（eid）
{
如果（$（“.differencenvironmenthiddentr”）。是（“：可见”）
{
$（“.differencenvironmenthiddentr”）.css（{“display”：“none”}）；
}
其他的
{
$（.differencenvironmenthiddentr”）.css（{“display”：“block”}）；
}       
}
函数populateCompare（cmp）
{
var mytr=新数组（）；
var mytrs=“”；
var i=0；
var xml=dummy1；
$（'#compareContent'）.empty（）；
$（'#compareContent'）.html（“正在加载的比较详细信息”）；
如果（cmp=“全部”）
{
$（xml）.find（'TagResult'）.each（函数（）{
if（$（this.attr（“isEqual”）=“false”）
{
mytr[i]=''+
'+$（this.attr（“elementname”）+''+
'+$（this.attr（“value1”）+''+
'+$（this.attr（“value2”）+''+
'';
mytrs+=mytr[i++]；
}
其他的
{
mytr[i]=''+
'+$（this.attr（“elementname”）+''+
'+$（this.attr（“value1”）+''+
'+$（this.attr（“value2”）+''+
'';
mytrs+=mytr[i++]；
}
});
$（'#compareContent'）.empty（）；
$('')
.html（“”+
''+
“姓名”+
“配置1”+
“配置2”+
''+mytrs
+'')
.appendTo（“#compareContent”）；
} 
如果（cmp==“差异”）
{
var-env=0；
$（xml）.find（'TagResult'）.each（函数（）{
if（$（this.attr（“isEqual”）=“false”）
{
if（$（this.attr（“子类别”）==“envVariable”）
{
如果（环境==0）
{
mytr[i]=''+
'+$（this.attr（“子类别”）+''+
''+
''+
'';
mytrs+=mytr[i++]；
mytr[i]=''+
'+$（this.attr（“elementname”）+''+
'+$（this.attr（“value1”）+''+
'+$（this.attr（“value2”）+''+
'';
mytrs+=mytr[i++]；
env=1；
}
其他的
{
mytr[i]=''+
'+$（this.attr（“elementname”）+''+
'+$（this.attr（“value1”）+''+
'+$（this.attr（“value2”）+''+
'';
mytrs+=mytr[i++]；
}
}
其他的
{
mytr[i]=''+
'+$（this.attr（“elementname”）+''+
'+$（this.attr（“value1”）+''+
'+$（this.attr（“value2”）+''+
'';
mytrs+=mytr[i++]；
}
}
});
$（'#compareContent'）.empty（）；
$('')
.html（“”+
''+
“姓名”+
“配置1”+
“配置2”+
''+mytrs
+'')
.appendTo（“#compareContent”）；
} 
}
一个
tr
的
显示
属性的默认值是
表行
，而不是
块
。它应该在
none
和
表行
之间切换。请参见
这是您的
显示
属性的问题



更改：

$（.differencenvironmenthiddentr”）.css（{“display”：“block}）

致：

$（“.differencenvironmenthiddentr”）.css（{display:”“}）




TR
不是
块
元素-通过将其设置为这样，浏览器符合适当的盒子型号规格
您可以按照Gustav的建议将其设置为
表行
，但最简单的方法是根本不使用空白字符串（如上所示）设置display属性。这将使浏览器使用其默认设置/行为
我可能在这里遗漏了什么，但我检查了站点，单击了envVariable，底部的行被隐藏，再次单击它，行就可见了。我不太明白你的问题是什么，但是在CSS中，你有
display:“block”
和
display:“none”
。你应该去掉引号
display:block
和
display:none
。或者简单地使用
.show（）
和
.hide（）
，让jQuery担心使用哪个显示值：@Gustav:envariable
下的3行为什么显示onload，为什么不隐藏？它只有在我点击后才会隐藏，我能做些什么让它从一开始就隐藏起来？@Abhishek:这是因为@patrick在上面指出：在你的CSS中，你引用了
display
属性：
display:“none”
。由于浏览器无法解释这一点，因此将忽略它。但是，您希望从
.regulartr
中删除
display:block
，因为正如您已经注意到的，当显示
block
时，表行的行为与您希望的不同。祝你好运谢谢你的回复，有用的信息+1。另外，您是否可以找出为什么
envariable
下的3行在加载时没有隐藏？只有单击单选按钮后，它才会隐藏