使用jQuery为现有表添加td

时间:2016-06-24 08:51:18

标签: jquery html html-table

我正在尝试使用td为现有表格添加jQuery。但它增加了重复。如何准确验证添加td

我试过下面的代码:

<table>
<thead>
<tr>
    <th>head1</th>
    <th>head2</th>
    <th>head3</th>
    <th>head4</th>
</tr>
</thead>
    <tbody>
        <tr >
            <td class="test test2">a1</td>
            <td>a2</td>
            <td>a3</td>
        </tr>
        <tr>
            <td class="test">c1</td>
            <td>c2</td>
            <td>c3</td>
        </tr>            
    </tbody>
</table>

jQuery代码

    <script>
       $(document).ready(function() {

       for(i=0;i<2;i++){
         var row = '<td style="background: red">b_'+ i +'</td>';    
                $('[class="test"]').before(row);
       }

})
        </script>

我想添加与td完全匹配的class="test",但它会同时添加class="test test2"class="test"

我该怎么做?

1 个答案:

答案 0 :(得分:2)

$(document).ready(function() {
       var length=  $('[class="test"]').length;
       for(i=0; i<length; i++){
         var row = '<td style="background: red">b_'+ i +'</td>';    
         $('[class="test"]:eq('+(i)+')').before(row);
       }
});

演示: https://jsfiddle.net/Lqkmu7L1/