HowTO make first row <th>?

JavaScript
1

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 instead of ?

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");

        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 (rows[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");
    }
2

you add a <thead> element with the appropriate th’s in it to the table.

3

could you show this?

I had a quick solution, not so nice but works…

if (i<1){
      var cell = document.createElement("th");
        cell.appendChild(cellText);
        row.appendChild(cell);
        
    }
    else{
      cell = document.createElement("td");}
      cell.appendChild(cellText);
      cell.setAttribute("ID", id4Table.nodeValue);
      row.appendChild(cell);
    }
4

if you’re not set on <th> you can also style each first <td> in a row via the td:first-child selector.

5

… if we talk about styling :slight_smile:

some changes, but still a little buggy

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");
}

could someone help me out with adding x additional cells per row containing inputfields and only one row needs to have
a datepicker applied to the inputfield.
It’s my first time working this way with DOM

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.