删除整列 table 动态和 n 列 jquery

Question

if (target >= 4) {
        $('.floor').slice(target).parent().parent().remove();
        //since I select the .floor input box, I have to use the parent() function two times, to move the selector up to the <tr> element
    } else {
        $('.floor').slice(4).parent().parent().remove();
        //since I select the .floor input box, I have to use the parent() function two times, to move the selector up to the <tr> element
    }

这就是我根据文本字段中的数字删除 n 行的方法，该数字随后将成为目标的值。除了需要删除整列之外，我如何才能做出相同的概念？

Update

<table id="flooring">
    <tr>
        <td><strong><p>Flooring</p></strong>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <hr/>
        </td>
        <td>
            <span>1st Floor</span>

        </td>
        <td>
            <span>2nd Floor</span>

        </td>
        <td>
            <span>3rd Floor</span>

        </td>
        <td>
            <span>4th Floor</span>

        </td>
    </tr>
    <tr>
        <td><span>Reinforced Concrete</span>
        </td>
        <td>

            <input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="loor3rd checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />

        </td>
    </tr>

    <tr>
        <td><span>Plain Cement</span>
        </td>
        <td>

            <input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor3rd checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />

        </td>
    </tr>
    <tr>
        <td><span>Marble</span>
        </td>
        <td>

            <input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor3rd checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />

        </td>
    </tr>
    <tr>
        <td><span>Wood</span>
        </td>
        <td>

            <input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor3rd checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />

        </td>
    </tr>
    <tr>
        <td><span>Tiles</span>
        </td>
        <td>

            <input type="checkbox" class="floor1st checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor2nd checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor3rd checkboxfloor" name="flooring[]" />

        </td>
        <td>

            <input type="checkbox" class="floor4th checkboxfloor" name="flooring[]" />

        </td>
    </tr>

</table>

这是默认值 html，我还根据输入文本在此处添加了列。当上一个输入大于当前输入时，我想删除整个列，这就是它的目的。

Answer 1

使用 :nth-child 选择器：

$("#tableid").find("tr :nth-child("+target+")").remove();

要删除从 target 开始的所有列：

var col;
while ((col = $("#tableid").find("tr :nth-child("+target+")")).length) {
    col.remove();
}

Answer 2

if (target >= 4) {
        $("table#.floor tr").find('td:eq('+target+')').nextAll().remove();
    } else {
        $("table#.floor tr").find('td:nth-child(5)').nextAll().remove();
    }

我最终使用了这段代码。希望这个小代码会帮助别人。上面的代码将选择所有 td 和 target 的 index 以及它旁边的所有 td

删除整列 table 动态和 n 列 jquery

Remove entire column of table dynamic and n number of columns jquery

jquery

html-table