jQuery如何根据表标题选择表中的列

时间:2013-10-20 15:11:02

标签: jquery html-table

我试图弄清楚如何根据表标题选择表中的列。到目前为止,我已经想到了很多谷歌搜索:

<html>
<body>
   <table>
      <tr><th class='x29'>A</th><th class='x29'>B</th><th class='x29'>C</th><th class='x29'>D</th></tr>
      <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
      <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
      <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
   </table>
   <script>
       $(document).ready(function() {
          var l_col;
          $('th.x29').each(function () {
             if ($(this).text() == 'C') {
                l_col = $(this).index();
                $(this).closest('tr').next().children().eq(l_col+1).append("<b>A String</b>");
             }
          });
       });
   </script>
</body>
</html>

不幸的是,这只会将“A String”附加到标题为“C”的列的第一行。如何将“A String”附加到标题为“C”的整个列。比我更好的代码将不胜感激。

2 个答案:

答案 0 :(得分:1)

您可以使用containsindexnth:child选择器的组合来获取每一行的第n个单元格。

代码:

  $(document).ready(function () {
      $("tr td:nth-child(" + ($('th.x29:contains("C")').index()+1) + ")").append("<b>A String</b>")
  });

演示:http://jsfiddle.net/IrvinDominin/VWr7X/

答案 1 :(得分:0)

怎么样

$(document).ready(function () {
    var l_col  = $('th.x29').filter(function(){
        return $(this).text() === 'C';
    }).index() +1 ;

    $('tr td:nth-child(' + l_col + ')').append('<b>A String</b>');

});

演示 http://jsfiddle.net/HfjLa/