0

私は10行のテーブルを持っています。行番号（1から9まで、最初の行はNO＆タイトル、2行目は1でなければなりません）をクラス「sno」のサイズに基づいてtdに出力することは可能ですか？テーブル？ここにhtmlがあります：

<table width="100%" border="1">
  <tr>
    <td width="23%">No.</td>
    <td width="77%">Title</td>
  </tr>
  <tr>
    <td class="sno">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

結果は

<table width="100%" border="1">
  <tr>
    <td width="23%">No.</td>
    <td width="77%">Title</td>
  </tr>
  <tr>
    <td class="sno">1</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">2</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">3</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">4</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">5</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">6</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">7</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">8</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="sno">9</td>
    <td>&nbsp;</td>
  </tr>

問題はテーブルを生成することではなく、ターゲットに適切な数を出力することです

4

5 に答える 5

1

シンプルなもので試してみてください

$('table tbody tr').not(":first").each(function(idx){
     $(this).children(":eq(0)").html(idx + 1);
});
于 2013-02-20T04:33:14.633 に答える
0

これを試して：

$(document).ready(function(){
    $cells=$("table td.sno");
    for(var i=0;i<$cells.length;i++)
    {
        //  alert(i);
        $cells.eq(i).text(i);
    }
});

フィドルを確認してくださいhttp://jsfiddle.net/qcWec/1/

于 2013-02-20T04:38:42.687 に答える
0

テーブルの行要素には、テーブルのゼロベースのシーケンス番号であるrowIndexプロパティがあります

それらが含まれているセクション。したがって、セルへの参照がある場合は、次を使用できます。

var rowIndex = cell.parentNode.rowIndex;

テーブルにヘッダー行がある場合は、おそらくそれらをaadテーブルセクションに配置する必要があります。

tbodyセクションの行に簡単に番号を付けることができます。

<table>
  <thead>
    <tr>
        <td>head<td>head
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="sno"></td>
      <td>...</td>
    </tr>
    <tr>
      <td class="sno"></td>
      <td>...</td>
    </tr>
  </tbody>
</table>

これで、次のようなことができます。

window.onload = function() {
  var table = document.getElementsByTagName('table')[0];
  var rows = table.tBodies[0].rows;

  for (var i=0, iLen=rows.length; i<iLen; i++) {
    rows[i].cells[0].innerHTML = i + 1;
  }
};

もちろん、他の方法（クラスなど）で行を取得することもできますが、上記はそれとは無関係です。

于 2013-02-20T04:42:19.253 に答える
0

これを試して：：

$(document).ready(function(){
    var i=1;

    $('.sno').each(function(){
        $(this).text(i);
        i++;
    });
});
于 2013-02-20T07:16:44.637 に答える
0

jsfiddle の例を次に示します: http://jsfiddle.net/3BBEN/

$(document).ready(function(){
    //use a special class name or id for the table
    //using find I'm getting all tr elements in the table
    //using not(':eq(0)') I'm ignoring the first tr element
    //using each I'm iterating through the selected elements
    $('table').find('tr').not(':eq(0)').each(function(i){
        //using children('td:eq(0)') I'm getting the first td element inside the tr
        $(this).children('td:eq(0)').addClass('sno').text(i+1);
    });
});
于 2013-02-20T04:48:55.237 に答える