DOM manipulates tables and styles

DOM manipulates tables and styles

one The operating table

1. HTML table

<table border="1" width="300">
  <caption>Staff table</caption>
  <thead>
    <tr>
      <th>The name</th>
      <th>gender</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zhang SAN</td>
      <td>male</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Li si</td>
      <td>female</td>
      <td>22</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Total: N</td>
    </tr>
  </tfoot>
</table>
Copy the code

2. DOM create table

var table = document.createElement('table');
table.border = 1;
table.width = 300;

var caption = document.createElement('caption');
table.appendChild(caption);
caption.appendChild(document.createTextNode('Personnel list'));

var thead = document.createElement('thead');
table.appendChild(thead);

var tr = document.createElement('tr');
thead.appendChild(tr);

var th1 = document.createElement('th');
var th2 = document.createElement('th');
var th3 = document.createElement('th');

tr.appendChild(th1);
th1.appendChild(document.createTextNode('name'));
tr.appendChild(th2);
th2.appendChild(document.createTextNode('age'));

document.body.appendChild(table);
Copy the code

3.HTML DOM create table

var table = document.createElement('table');
table.border = 1;
table.width = 300;

table.createCaption().innerHTML = 'Personnel list';

//table.createTHead();
//table.tHead.insertRow(0);
var thead = table.createTHead();
var tr = thead.insertRow(0);

var td = tr.insertCell(0);
td.appendChild(document.createTextNode('data'));

var td2 = tr.insertCell(1);
td2.appendChild(document.createTextNode(Data '2'));

document.body.appendChild(table);
Copy the code

two Operating style