Question

我想将130分配给所有行的第一个和第一个td，所有行的100到第二个和第二个td，所有行的第40个到第三个和第三个td，所有行的第120个到第四个和第四个td所有行的230到第五和第五个。

我的第一个和第一个td的代码是

$('#tiptip_content table th, td').eq(0).css('width','130px');
$('#tiptip_content table th, td').eq(1).css('width','100px');

我的动态HTML代码是

<div style="display: none; margin: 624px 0px 0px 494px;" id="tiptip_holder" class="tip_top">
<div id="tiptip_arrow" style="margin-left: 313px; margin-top: 71px;">
    <div id="tiptip_arrow_inner">
    </div>
</div>
<div id="tiptip_content">
    <div style="width: 100%; height: 25px; overflow: hidden; position: relative;" class="xhdr">
        <img style="display: none; position: absolute;" src="https://www.lifemark.ca/contents/dhx/grid/imgs/sort_desc.gif">
        <table cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed; margin-right: 20px; padding-right: 20px;" class="hdr">
            <tbody>
                <tr style="height: auto;">
                    <th style="height: 0px;">
                    </th>
                    <th style="height: 0px;">
                    </th>
                    <th style="height: 0px;">
                    </th>
                    <th style="height: 0px;">
                    </th>
                    <th style="height: 0px;">
                    </th>
                </tr>
                <tr>
                    <td style="color: black; font-size: 9px; vertical-align: top; font-weight: bold;">
                        <div class="hdrcell">
                            Ax Name
                        </div>
                    </td>
                    <td style="color: black; font-size: 9px; vertical-align: top; font-weight: bold;">
                        <div class="hdrcell">
                            Claimant
                        </div>
                    </td>
                    <td style="color: black; font-size: 9px; vertical-align: top; font-weight: bold;">
                        <div class="hdrcell">
                            Status
                        </div>
                    </td>
                    <td style="color: black; font-size: 9px; vertical-align: top; font-weight: bold;">
                        <div class="hdrcell">
                            Coordination Times
                        </div>
                    </td>
                    <td style="color: black; font-size: 9px; vertical-align: top; font-weight: bold;">
                        <div class="hdrcell">
                            Ax Address
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div style="width: 100%; overflow-x: auto; overflow-y: hidden;" class="objbox">
        <table cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed;" class="obj">
            <tbody>
                <tr style="height: auto;">
                    <th style="height: 0px;">
                    </th>
                    <th style="height: 0px;">
                    </th>
                    <th style="height: 0px;">
                    </th>
                    <th style="height: 0px;">
                    </th>
                    <th style="height: 0px;">
                    </th>
                </tr>
                <tr class=" ev_dhx_skyblue">
                    <td valign="middle" align="left">
                        Chiropractic Assessment
                    </td>
                    <td valign="middle" align="left">
                        Test David
                    </td>
                    <td valign="middle" align="left">
                        Booked
                    </td>
                    <td valign="middle" align="left">
                        07:30 PM - 08:30 PM;08:30 PM - 09:30 PM;09:30 PM - 10:30 PM
                    </td>
                    <td valign="middle" align="left">
                        2 Wellington Street West, Brampton, Ontario, L6Y 4R2
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

我会使用类和CSS而不是使用jquery。

给每个TH一个合适的类，如“姓名”，“地址”，“约会”等。

然后在CSS文件中设置这些类的样式。你只需要给TH一个宽度，TD就是一样的。

th.name {width: 100px}
th.address {width: 150px}
... and so on ...

Answer 2

我不确定你的问题以及为什么要用jQuery做这个，但你可能想要这样的东西：

$('#tiptip_content table tr').each(function(){
    $('th, td', this).css(function(i){
       return {width: [130, 100, 40, 120][i]}
    });
});

如果您没有特殊原因需要更改所有行，请使用

$('#tiptip_content table tr:eq(0) th').css(function(i){
    return {width: [130, 100, 40, 120][i]}
});

Answer 3

您要找的是nth-child：

$('#tiptip_content table th:nth-child(3)') // etc.

Answer 4

在脚本中添加任何样式都是不好的做法。它们会覆盖样式表，这是未来维护的噩梦。我建议您在样式表中为这些元素分配各自的宽度类，或在样式表中为use css pseudo classes分配类。

tr > th, tr > td {
   width: 130px;
}
tr:nth-child(2), td:nth-child(2) {
   width: 100px;
}
tr:nth-child(3), td:nth-child(3) {
   width: 40px;
}
tr:nth-child(4), td:nth-child(4) {
   width: 120px;
}
tr:nth-child(5), td:nth-child(5) {
   width: 230px;
}

即使你做需要动态更改样式，也不应该在脚本中设置样式。您可以动态地为该元素分配一个类，并在css中进行样式设置。例如：

/* add the class in the .js file */ 
$('tr:first-child').addClass('first-row');

该课程看起来像

/* style the class in the .css file */
.first-row { 
  width: 130px;
}

相信我，它不会是第一个需要单独的css文件才能工作的插件。

Answer 5

使用table-layout:fixed时，您应该使用<colgroup>来定义尺寸。以下内容应在<table...>之后和<tbody>之前立即生效：

<colgroup>
    <col style="width:130px;" />
    <col style="width:100px;" />
    <col style="width:40px;" />
    <col style="width:120px;" />
    <col style="width:230px;" />
</colgroup>

如何使用jquery更改所有Th和td的宽度？

5 个答案: