Javascript Reference - HTML DOM Table deleteTHead() Method








The deleteTHead() method removes the <thead> element (and its content) from the table.

Browser Support

deleteTHead Yes Yes Yes Yes Yes

Syntax

tableObject.deleteTHead() 

Parameters

None

Return Value

No return value





Example

The following code shows how to create and delete a <thead> element.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from www  . j ava 2s. com-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
</table>
<button onclick="myCreateFunction()">Create thead</button>
<button onclick="myDeleteFunction()">Delete thead</button>

<script>
function myCreateFunction() {
    var table = document.getElementById("myTable");
    var header = table.createTHead();
    var row = header.insertRow(0);
    var cell = row.insertCell(0);
    cell.innerHTML = "<b>This is a table header</b>";
}

function myDeleteFunction() {
    document.getElementById("myTable").deleteTHead();
}
</script>

</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows how to remove a <thead> element from a table.


<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {<!--   w ww. j ava  2 s.com-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>A</td>
      <td>$1</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>B</td>
      <td>$2</td>
    </tr>
  </tbody>
</table>
<br> 

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myTable").deleteTHead();
}
</script>

</body>
</html>

The code above is rendered as follows: