antidot Posted November 16, 2016 Share Posted November 16, 2016 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 More sharing options...
antidot Posted November 16, 2016 Author Share Posted November 16, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now