3

私はフォーマットのhtmlテーブルを持っています

<div id="divOutputWindow">
<table>
<tbody>
<tr>
<td>/* Set Width 10 Px */ </td>
<td>/* Set Width 20 Px */ </td>
</tr>
<tr>
/* Same for all tr */
</tr>
</tbody>
</table>
</div>

つまり、最初のtdの幅は10ピクセル次のtd15ピクセル次のtd20ピクセル...同様に

私が試したのは

$('#divOutputWindow').find('table').$('tbody > tr > td').css('width', '10px');
4

7 に答える 7

6

これを試して

$('div#divOutputWindow table tr td').eq(0).css('width','10px');
$('div#divOutputWindow table tr td').eq(1).css('width','20px');
于 2012-11-21T11:12:41.520 に答える
4
  • <td>内側の各トラフをループします#divOutputWindow。
  • そのために使用.each();すると、ループ内で現在のDOMオブジェクトに。でアクセスできます$(this)。
  • 最小値とステップサイズを定義し、$(this).index();カウントに使用します。
  • 次に、.css('attr','value');コマンドを使用して現在のを操作します<td>。これはcss属性のセッターです。最後に置くことを忘れないでください"px"。

コード：

$('#divOutputWindow td').each(function() {
    var min = 10;                                  // Define a minimum
    var step = 5 * $(this).index();                // Define Step(your step is 5 here)
    $(this).css('width', (min + step) + "px");     // css attribute of your <td> width:15px; i.e.
});

うまくいきましたか？

編集：@billyonecanがすでに似たようなものを投稿しているのを見ました、両方の例をテストしてください、私の作品（私はそれをテストしました）

于 2012-11-21T12:27:42.720 に答える
2

なぜCSS3疑似クラスを使用しないのですか？

好き

td:first-child
{
    width: 10px;
}

http://reference.sitepoint.com/css/css3psuedoclasses

編集

Jsfiddle

于 2012-11-21T11:05:50.547 に答える
2

私はあなたがうまく機能しているこれに興味があると思います：http：//jsbin.com/ojunor/1/edit

$('#divOutputWindow table tr').each(function(){
    $('td:eq(0)',this).attr({"width":"10"}).text('10');
    $('td:eq(1)',this).attr({"width":"20"}).text('20');
});
于 2012-11-21T11:17:25.463 に答える
2

次を使用できます。

$('#divOutputWindow td').attr('width', 10);
于 2012-11-21T11:24:27.680 に答える
1

これがあなたの意図したことだと思います。基本的に、をループし<td>、要素インデックスに関連して幅を設定します。例：

$('#divOutputWindow td').each(function() {
  var step = 5; $td = $(this);
  $td.width(10 + (step * $td.index()));
});

基本的には次のようになります。

<tr>
  <td style="width: 10px;"> ... </td>
  <td style="width: 15px;"> ... </td>
  <td style="width: 20px;"> ... </td>
</tr>

.. 等々

これがフィドルです

于 2012-11-21T11:15:26.607 に答える
0

理想的には、これはcss（疑似）クラスで行うのが最適ですが、次のコードを使用できます。

// Cache the td selector
var $td = $('#divOutputWindow table tr td');

$td.eq(0).width(10);
$td.eq(1).width(20);
...

これが動作するjsbinです

于 2012-11-21T11:16:53.047 に答える