onlyforbopi
9/26/2018 - 4:15 PM

JS.HTML.CSS.A Typical HTML table.ex2

JS.HTML.CSS.A Typical HTML table.ex2

style.css
content_copyfile_download
table {
  width:100%;
  border:1px solid;
  border-collapse: collapse;
}


tr, th, td {
  border:1px solid;
  font-family:courier;
}

td {
  text-align:center;
  padding:10px;
  
}
script.js
content_copyfile_download

function insertRow() {
  var table = document.querySelector("#myTable");
  
  // without parameters, insert at the end,
  // otherwise parameter = index where the row will be inserted
  var row = table.insertRow();
  
  row.innerHTML = "<td>New</td><td>New</td><td>New</td>"
}

function deleteFirstRow() {
  var table = document.querySelector("#myTable");
  table.deleteRow(1); // 0 is the header
}
js-html-css-a-typical-html-table-ex2.markdown
content_copyfile_download
  • Rendered
  • Source

JS.HTML.CSS.A Typical HTML table.ex2

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>A typical HTML table with simple styling</title>
</head>
<body>
<table id="myTable">
 <caption>A typical HTML table</caption>  
  <tr>
    <th scope="col">Given Name</th>
    <th scope="col">Family Name</th> 
    <th scope="col">Age</th>
  </tr>
  <tr>
    <td>Michel</td>
    <td>Buffa</td> 
    <td>52</td>
  </tr>
  <tr>
    <td>Dark</td>
    <td>Vador</td> 
    <td>Unknown</td>
  </tr>
    <tr>
    <td>Luke</td>
    <td>Skywalker</td> 
    <td>Unknown</td>
  </tr>
</table>
  <p>Click to add a new row</p>
  <button onclick="insertRow();">Add a new row</button>
  <p>Click to delete the first row of the table</p>
  <button onclick="deleteFirstRow();">Delete first row</button>
</body>
</html>