Jump to content
Sign in to follow this  
antidot

Creating DOM Table - HowTo first row <TH> ?

Recommended Posts

Hi, im a little bit struggling here.

What I am trying to do is read the content from a Table by reading the number of rows and cells,(later on only selected rows by checkbox)

then display the data in a ´generated Table (where i have to add cells with inputfields)

 

So now my question is:

How do i have to write the code so the first row will be created with <th> instead of <td> ?

How to add input fields to the cells ?

(actually they all could be input fields, just filled out with the data from the table i read from and blank fields for the added or so on.)

function generate_table() {
  // get the reference for the body
  var body = document.getElementsByTagName("body")[0];
    var x = document.getElementById("TableB").rows.length;
    var y = document.getElementById("TableB").rows[0].childElementCount;
    var z = document.getElementById("TableB").rows[1].cells[3].innerText;
    alert("x="+x +" y="+y+" z="+z);
 
  // creates a <table> element and a <tbody> element
  var tbl     = document.createElement("table");
  var tblBody = document.createElement("tbody");
 
  // creating all cells
  for (var i = 0; i < x; i++) {
    // creates a table row
    var row = document.createElement("tr");
 alert("ROW"+row);
    for (var j = 0; j < y; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      var cellText = document.createTextNode("cell in row "+i+", column "+j);
    if (row.tabIndex[0]){
      var cell = document.createElement("th");
        cell.appendChild(cellText);
        row.appendChild(cell);
        
    }
    else{
      cell = document.createElement("td");}
      cell.appendChild(cellText);
      row.appendChild(cell);
        
    }
 
    // add the row to the end of the table body
    tblBody.appendChild(row);
  }
 
  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  body.appendChild(tbl);
  // sets the border attribute of tbl to 2;
  tbl.setAttribute("border", "2");
    tbl.setAttribute("class", "tableTest");
}

Share this post


Link to post
Share on other sites

Well, did some changes. working better already.

function generate_table() {
    // get the reference for the body
    var body = document.getElementsByTagName("body")[0];
    var x = document.getElementById("TableB").rows.length;
    var y = document.getElementById("TableB").rows[0].childElementCount;
    var z = document.getElementById("TableB").rows[0].cells[2].innerText;
    var origTable = document.getElementById("TableB");
    alert("x=" + x + " y=" + y + " z=" + z);

    // creates a <table> element and a <tbody> element
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");

    // creating all cells
    for (var i = 0; i < x; i++) {
        // creates a table row
        var row = document.createElement("tr");
        for (var j = 2; j < y; j++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cellText = document.createTextNode("cell in row " + i + ", column " + j);
            var cellTextHeader = document.createTextNode(origTable.rows[0].cells[j].innerText);
            console.log(cellTextHeader);
            var id4Table = document.createTextNode("tbr" + i + j);
            //if row is first row of the table create a <th>    
            if (i < 1) {
                var cell = document.createElement("th");
                cell.appendChild(cellTextHeader);
                //row.appendChild(cell);

            } else {
                cell = document.createElement("td");
            cell.appendChild(cellText);
            }
            cell.setAttribute("ID", id4Table.nodeValue);
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody.appendChild(row);
    }

    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);
    // appends <table> into <body>
    body.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "2");
    tbl.setAttribute("class", "tableTest");
}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...