0

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

我的第一个和第一个 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>

4

5 回答 5

1

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

给每个 TH 一个适当的类，如“名称”、“地址”、“日期”等。

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

th.name {width: 100px}
th.address {width: 150px}
... and so on ...
于 2013-09-13T19:41:56.720 回答
0

我不确定您的问题以及您为什么要使用 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]}
});
于 2013-09-13T19:41:44.687 回答
0

您正在寻找的是nth-child：

$('#tiptip_content table th:nth-child(3)') // etc.
于 2013-09-13T19:43:53.907 回答
0

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

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 文件才能工作的插件。

于 2013-09-13T19:56:58.597 回答
0

使用时table-layout:fixed，您应该使用 a<colgroup>来定义尺寸。以下内容应紧接在 after<table...>和 before <tbody>：

<colgroup>
    <col style="width:130px;" />
    <col style="width:100px;" />
    <col style="width:40px;" />
    <col style="width:120px;" />
    <col style="width:230px;" />
</colgroup>
于 2013-09-13T20:23:33.820 回答