0

我有一个 10 行的表，是否可以根据大小将行号（从 1 到 9，第一行是 NO&title，第二行应该是 1）打印到 td 类“sno”桌子？这是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;

如果您在表格中有标题行，您可能应该将它们放在 thead 表格部分中，然后

您可以轻松地对 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

这是 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 回答
0

试试这个：：

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

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