0

如何使用以下代码删除列。我正在使用 jquery 和 joomla。

jQuery("a.coldelete").live("click", function(){
                    var Index = jQuery(this).closest("th").prevAll("th").length;
                    var CostIndex = Index *2 - 1;
                    var SaleIndex = Index *2; 
                    alert(Index+'-'+CostIndex+'-'+SaleIndex);

                    jQuery("#ratecardlist").find("th:eq("+Index+")").remove();

                    jQuery("#labelrow").find("td:eq("+CostIndex+")").remove();
                    jQuery("#labelrow").find("td:eq("+SaleIndex+")").remove();

                    jQuery("#ratecardlist").find("tr.ratedatarow").each(function(){
                          jQuery(this).find("td:eq("+CostIndex+")").remove();
                          jQuery(this).find("td:eq("+SaleIndex+")").remove();
                    });
              });

下面提到了 HTML 结构，它是由 jquery 操作的。

<table id="cardlist" class="admintable">
    <tbody>
        <tr>
            <th>Show Time</th>
            <th colspan="2" style="text-align:left;">A Full <a href="#ratecardinfo" class="coldelete"><img src="com/assets/images/remove.png" /></a></th>
            <th colspan="2" style="text-align:left;">A Half <a href="#ratecardinfo" class="coldelete"><img src="com/assets/images/remove.png" /></a></th>
            <th colspan="2" style="text-align:left;">B Full <a href="#ratecardinfo" class="coldelete"><img src="com/assets/images/remove.png" /></a></th>
            <th colspan="2" style="text-align:left;">B Half <a href="#ratecardinfo" class="coldelete"><img src="com/assets/images/remove.png" /></a></th>
            <th colspan="2" style="text-align:left;">C Full <a href="#ratecardinfo" class="coldelete"><img src="com/assets/images/remove.png" /></a></th>
            <th></th>
        </tr>
        <tr id="labelrow">
            <td>&nbsp;</td>
            <td width="80px"><label>COST</label></td>
            <td width="80px"><label>SALE</label></td>
            <td width="80px"><label>COST</label></td>
            <td width="80px"><label>SALE</label></td>
            <td width="80px"><label>COST</label></td>
            <td width="80px"><label>SALE</label></td>
            <td width="80px"><label>COST</label></td>
            <td width="80px"><label>SALE</label></td>
            <td width="80px"><label>COST</label></td>
            <td width="80px"><label>SALE</label></td>
            <td></td>
        </tr>
        <tr class="ratedatarow" id="rate15">
            <td>6:30 PM</td>
            <input type="hidden" value="15" name="showtimeids[]" /><input type="hidden" value="101" name="categoryids[]" />
            <td width="50px"><input type="text" value="650.00" name="fc:15:101" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="670.00" id="fs_15_101" name="fs:15:101" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="500.00" name="hc:15:101" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="520.00" name="hs:15:101" id="hs_15_101" style="width:45px;" /></td>
            <input type="hidden" value="102" name="categoryids[]" />
            <td width="50px"><input type="text" value="400.00" name="fc:15:102" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="420.00" id="fs_15_102" name="fs:15:102" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="300.00" name="hc:15:102" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="320.00" name="hs:15:102" id="hs_15_102" style="width:45px;" /></td>
            <input type="hidden" value="103" name="categoryids[]" />
            <td width="50px"><input type="text" value="1200.00" name="fc:15:103" style="width:45px;" /></td>
            <td width="50px"><input type="text" value="1240.00" name="fs:15:103" id="fs_15_103" style="width:45px;" /></td>
            <td><a onclick="removeRow('rate15');" href="#ratecardinfo" id="rem"><img src="com/assets/images/remove.png" /></a> <a id="mo_applytoall" onclick="applyToAll('rate15');" href="#ratecardinfo"> Apply to All </a></td>
        </tr>
        <tr>
            <td style="background-color:#DDDDDD;" colspan="11"></td>
            <td style="background-color:#DDDDDD;">
                <input type="submit" style="cursor:pointer;" value="Add Card" name="addratecard" />                    
                <input type="button" style="cursor:pointer;" onclick="resetAll();" value="Reset" />                      
                <input type="button" style="cursor:pointer;" onclick="clearAll();" value="Clear All" /> 
            </td>
        </tr>
    </tbody>
</table>

当我单击 remove.png 时，应该删除特定的行。

谢谢

4

3 回答 3

1

最有效的方法是给列的所有单元格一个类，然后您可以使用类名来删除列。

$('.myColumn').remove();

或者，您可以循环浏览行，根据需要删除每个第 N 个子项。

$('tr').each(function(){
  $(this).children().eg(N).remove();
})
于 2012-09-11T09:57:38.143 回答
1

在功能removeRow尝试

$(this).closest('tr').remove();
于 2012-09-11T10:08:57.910 回答
1

这似乎工作..

$("a").on("click", function(){
    $("table tbody tr").find("td:eq(0)").remove(); 
});

http://jsfiddle.net/peterbenoit/ymYpv/

于 2012-09-11T18:43:58.517 回答