Question

当用户点击remove时，我正在尝试删除表格中的列，但我似乎无法获得正确的eq()

这是我的HTML

   <table class="car-titles">
        <thead data-spy="affix" data-offset-top="495">
            <tr class="car-figures">
                <th></th>
                <td class="empty">
                    <figure></figure>
                    <ul>
                        <li><a href="#" data-toggle="compare-remove">Remove</a></li>
                        <li><a href="#">View</a></li>
                        <li class="space"></li>
                    </ul>
                </td>
                <td class="empty">
                    <figure></figure>
                    <ul>
                        <li><a href="#"  data-toggle="compare-remove">Remove</a></li>
                        <li><a href="#">View</a></li>
                        <li class="space"></li>
                    </ul>
                </td>
                <td class="empty">
                    <figure></figure>
                    <ul>
                        <li><a href="#"  data-toggle="compare-remove">Remove</a></li>
                        <li><a href="#">View</a></li>
                        <li class="space"></li>
                    </ul>
                </td>
                <td class="empty last">
                    <figure></figure>
                    <ul>
                        <li><a href="#" data-toggle="compare-remove" >Remove</a></li>
                        <li><a href="#">View</a></li>
                        <li class="space"></li>
                    </ul>
                </td>
            </tr>
            <tr class="version">
                <th>Version</th>
                <td class="empty first last"></td>
                <td class="empty"></td>
                <td class="empty"></td>
                <td class="empty last"></td>
            </tr>
        </thead>
    </table>


    <table class="attributes">
        <tbody>

            <tr>
                <th class="heading" colspan="5">Key Facts</th>
            </tr>
            <tr rel="rating">
                <th>Our rating</th>
                <td class="empty first last"></td>
                <td class="empty"></td>
                <td class="empty"></td>
                <td class="empty last"></td>
            </tr>
            <tr rel="price">
                <th>Price</th>
                <td class="empty first last"></td>
                <td class="empty"></td>
                <td class="empty"></td>
                <td class="empty last"></td>
            </tr>
         </tbody>
      </table>

这是我的JQuery

 $(function() {
        // Listen for clicks on table originating from [data-toggle="compare-remove"] element(s)
    $("table").on("click", '[data-toggle="compare-remove"]', function ( event ) {
         var e = $(this).parent().index();
         var f = $(".comparison");
         var g = f.find(".version");
         g.children("td").eq(e).addClass("empty").empty();
         var i = e + 2;
            $("table.attributes tr[rel] td:nth-child(" + i + ")").addClass("empty").text("");
        });
    });

这是jsfiddle

注意：我想删除两个表中的正确列

Answer 1

这适合我。

$(function() {
    // Listen for clicks on table originating from [data-toggle="compare-remove"] element(s)
    $("table").on("click", '[data-toggle="compare-remove"]', function ( event ) {
        var e = $(this).parents('td').index();
        $("table").find('td:nth-child(' + (e+1) + ')').remove();
    });
});

关键功能是＆＃34;父母＆＃34;正在寻找最近的＆＃34; td＆＃34;来自细胞内部。然后只需获取其索引并删除具有该索引的表TD

Answer 2

试试这个：

<table class="car-titles">
        <thead data-spy="affix" data-offset-top="495">
            <tr class="car-figures">
                <th></th>
                <td class="empty">
                    <figure></figure>
                    <ul>
                        <li><a class='remove' href="#" data-toggle="compare-remove">Remove1</a></li>
                        <li><a href="#">View</a></li>
                        <li class="space"></li>
                    </ul>
                </td>
                <td class="empty">
                    <figure></figure>
                    <ul>
                        <li><a class='remove' href="#"  data-toggle="compare-remove">Remove2</a></li>
                        <li><a href="#">View</a></li>
                        <li class="space"></li>
                    </ul>
                </td>
                <td class="empty">
                    <figure></figure>
                    <ul>
                        <li><a class='remove' href="#"  data-toggle="compare-remove">Remove3</a></li>
                        <li><a href="#">View</a></li>
                        <li class="space"></li>
                    </ul>
                </td>
                <td class="empty last">
                    <figure></figure>
                    <ul>
                        <li><a class='remove' href="#" data-toggle="compare-remove" >Remove4</a></li>
                        <li><a href="#">View</a></li>
                        <li class="space"></li>
                    </ul>
                </td>
            </tr>
            <tr class="version">
                <th>Version</th>
                <td class="empty first last">1.0</td>
                <td class="empty">2.0</td>
                <td class="empty">3.0</td>
                <td class="empty last">4.0</td>
            </tr>
        </thead>
    </table>


    <table class="attributes">
        <tbody>

            <tr>
                <th class="heading" colspan="5">Key Facts</th>
            </tr>
            <tr rel="rating">
                <th>Our rating</th>
                <td class="empty first last">1</td>
                <td class="empty">2</td>
                <td class="empty">3</td>
                <td class="empty last">4</td>
            </tr>
            <tr rel="price">
                <th>Price</th>
                <td class="empty first last">1111</td>
                <td class="empty">2222</td>
                <td class="empty">3333</td>
                <td class="empty last">4444</td>
            </tr>
         </tbody>
      </table>

和你的jquery：

$(function() {
    $("a.remove").click(function(){
        var indx= $(this).closest("td").index()+1;
        $("table.car-titles td").remove(":nth-child(" + indx + ")");
    })
})

单击表中的href时清除表列

2 个答案: