Jump to content

Creating DOM Table - HowTo first row <TH> ?


antidot

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");
}
Link to comment
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");
}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...