3

我有一个 HTML 表：

<table id="persons" border="1">
    <thead id="theadID">
        <tr>
            <th>Name</th>
            <th>sex</th>
            <th>Message</th>
        </tr>
    </thead>
    <tbody id="tbodyID">
        <tr>
            <td>Viktor</td>
            <td>Male</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Melissa</td>
            <td>Female</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Joe</td>
            <td>Male</td>
            <td>etc</td>
        </tr>
    </tbody>
</table>
<input type="button" onclick="deleteLastColumn();" value="do it"/>

我需要一个 javascript/jquery 代码，它删除表中的最后一列（消息）：

function deleteLastColumn() {
    $("#theadID tr th:not(:last-child)......
    $("#tbodyID tr td:not(:last-child)......
}

所以结果应该是这样的：

<table id="persons" border="1">
    <thead id="theadID">
        <tr>
            <th>Name</th>
            <th>sex</th>
        </tr>
    </thead>
    <tbody id="tbodyID">
        <tr>
            <td>Viktor</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>Melissa</td>
            <td>Female</td>
        </tr>
        <tr>
            <td>Joe</td>
            <td>Male</td>
        </tr>
    </tbody>
</table>

我知道有 ":not(last)" 方法，但我找不到任何例子来解决我的问题。有人可以帮我吗？

4

3 回答 3

13

尝试

$('#persons tr').find('th:last-child, td:last-child').remove()

演示：小提琴

于 2013-07-31T13:47:15.493 回答
3

您可以使用此解决方案轻松实现它..

function myFunction() {
  var allRows = document.getElementById('my_table').rows;
 for (var i=0; i< allRows.length; i++) {
   allRows[i].deleteCell(-1); 
 }
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<table id="my_table">
  <thead >
    <th>Column 1</td>
    <th>Column 2</td>
    <th>Column 3</td>
  </thead >
  <tr >
    <td>Number 1</td>
    <td>String 1</td>
    <td>Decimal 1</td>
  </tr>
  <tr >
    <td>Number 2</td>
    <td>String 2</td>
    <td>Decimal 2</td>
  </tr>
  <tr >
     <td>Number 3</td>
    <td>String 3</td>
    <td>Decimal 3</td>
  </tr>
</table><br>

<button onclick="myFunction()">Remove Last Column</button>
</body>
</html>

于 2019-02-11T13:27:47.727 回答
1

除了 Arun P Johny 的回答，

这将让您在每次单击按钮时删除最后一行。如果您只想删除一列，而不是其他列，您可以试试这个。

function deleteLastColumn() {
    $(document).find('.last').remove()
}

将类添加last到表的最后一个td和th之后。

演示：小提琴

于 2013-07-31T14:14:20.577 回答