Case 7, dynamically created node operation table

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box table {
      border-collapse: collapse;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script the src = "common.js" > </ Script > 
  < Script > 
    // var S = {name: 'ZS', Subject: 'language', Score: 90}; 
    // analog data 
    var DATAS = [ 
      {name: ' ZS ' , Subject: ' language ' , Score: 90 }, 
      {name: ' LS ' , Subject: " Mathematics ' , Score: 80 }, 
      {name: ' WW ' , Subject: ' English ', score: 99 }, 
      {name: ' ZL ' , Subject: ' English ' , Score: 100 }, 
      {name: ' XS ' , Subject: ' English ' , Score: 60 }, 
      {name: ' DC ' , Subject: ' English ' , Score: 70 } 
    ]; 

    // header data 
    var headDatas = [ ' name ' , ' subject ' , 'Results ' , ' operation ' ]; 

    // 1 creates the table element 
    var table = document.createElement ( ' table ' ); 
    My $ ( ' Box ' ) .appendChild (table); 
    table.border =  ' 1px ' ; 
    table.width =  ' 400px ' ; 

    // 2 creates header 
    var thead = document.createElement ( ' thead ' ); 
    table.appendChild (thead); 

    var TR= document.createElement('tr');
    thead.appendChild(tr);
    tr.style.height = '40px';
    tr.style.backgroundColor = 'lightgray';

    // 遍历头部数据，创建th
    for (var i = 0; i < headDatas.length; i++) {
      var th = document.createElement('th');
      tr.appendChild(th);
      // th.innerText
      setInnerText (TH, headDatas [I]); 
    } 
    
    // . 3 to create data lines 
    var tbody = document.createElement ( ' tbody ' ); 
    table.appendChild (tbody); 
    tbody.style.textAlign =  ' Center ' ;
     for ( var I =  0 ; I < datas.length; I ++ ) {
       // a student performance {name: 'zl', subject : ' English', score: 100}, 
      var Data = DATAS [I]; 
      TR = Document. the createElement ( ' TR' ); 
      Tbody.appendChild (TR); 

      // traverse the object 
      for ( var Key in Data) {
         var TD = document.createElement ( ' TD ' ); 
        tr.appendChild (TD); 
        setInnerText (TD, Data [Key]) ; 
      } 
      // generated delete the columns corresponding to 
      TD = document.createElement ( ' TD ' ); 
      tr.appendChild (TD); 
      // hyperlink to remove 
      var link = document.createElement ( ' a ' );
      td.appendChild (Link); 
      link.href =  ' JavaScript: void (0) ' ; 
      setInnerText (Link, ' delete ' ); 

      link.onclick = linkDelete; 
    } 

    function linkDelete () {
       // the removeChild () 
      // Get Parent element 
      //  
      // Get the row to be deleted 
      var TR =  the this .parentNode.parentNode; 
      tbody.removeChild (TR); 
      return  to false ; 
    } 
  </ Script > 
</ body > 
</html>

The content conmon

function My $ (ID) {
   return document.getElementById (ID); 
} 

// process browser compatibility 
// Get first child 
function getFirstElementChild (Element) {
     var Node, Nodes = the element.childNodes, I = 0 ;
     the while (Node = Nodes [I ++ ]) {
         IF (node.nodeType ===. 1 ) {
             return Node; 
        } 
    } 
    return  null ; 
} 

// process browser compatibility 
// Get the next sibling 
 function getNextElementSibling (element) {
     var EL =Element;
     the while (EL = el.nextSibling) {
       IF (el.nodeType ===. 1 ) {
           return EL; 
      } 
    } 
    return  null ; 
  } 


// compatibility problems and processing innerText textContent of 
// the content between the tags set 
function setInnerText (Element, Content) {
   // determines whether the current browser support the innerText 
  iF ( typeof element.innerText === 'String' ) { 
    element.innerText = Content; 
  } the else { 
    element.textContent = Content; 
  } 
}

Case 7, dynamically created node operation table

Guess you like