Function to populate a table with data, not working - javascript

I've tried looking at sources to learn a little on a method of creating rows and cells, however I'm surely getting something wrong, the output puts all the data into the header. and doesnt generate rows.
Javscript:
function addRepairData() {
// Select the Table
var tbl = document.getElementById('repairInnerTable');
var headerText = ["ID", "Status", "Assigned To"];
var cellText = ["1", "Full", "willy wonka"];
// Set number of rows
var rows = 10;
var columns = headerText.length;
// create table header
for (var h = 0; h < columns; h++) {
var th = document.createElement("TH");
var thText = document.createTextNode(headerText[h]);
th.appendChild(thText);
document.getElementById("tableHead").appendChild(th);
}
for (var r = 0; r < rows; r++) {
var tr = document.createElement("TR");
var rowid = "row" + r;
document.getElementById(rowid).appendChild(tr);
for (var c = 0; c < columns; c++)
{
var td = document.createElement("TD");
var tdText = document.createTextNode(cellText[c]);
th.appendChild(tdText);
}
}
HTML:
<div class="stTableContainer" id="repairsTable">
<table style="width: 100%; color:white;" id="repairInnerTable">
<tr id="tableHead">
</tr>
<tr id="row0"></tr>
<tr id="row1"></tr>
<tr id="row2"></tr>
<tr id="row3"></tr>
<tr id="row4"></tr>
<tr id="row5"></tr>
<tr id="row6"></tr>
<tr id="row7"></tr>
<tr id="row8"></tr>
<tr id="row9"></tr>
</table>
</div>
EDIT:
I might have a lot of unneeded fluff in the code, that's from my trial and error attempts.

There are a few corrections, see code.
function addRepairData() {
// Select the Table
var tbl = document.getElementById('repairInnerTable');
var headerText = ["ID", "Status", "Assigned To"];
var cellText = ["1", "Full", "willy wonka"];
// Set number of rows
var rows = 10;
var columns = headerText.length;
// create table header
for (var h=0; h<columns; h++) {
var th = document.createElement('th');
var thText = document.createTextNode(headerText[h]);
th.appendChild(thText);
document.getElementById('tableHead').appendChild(th);
}
for (var r=0; r<rows; r++) {
var rowid = 'row' + r;
var tr = document.getElementById('row' + r);
for (var c=0; c<columns; c++) {
var td = document.createElement('td');
td.appendChild(document.createTextNode(cellText[c]));
tr.appendChild(td);
}
}
}
addRepairData();
td {
text-align: center;
}
<div class="stTableContainer" id="repairsTable">
<table style="width: 100%;" id="repairInnerTable">
<tr id="tableHead"></tr>
<tr id="row0"></tr>
<tr id="row1"></tr>
<tr id="row2"></tr>
<tr id="row3"></tr>
<tr id="row4"></tr>
<tr id="row5"></tr>
<tr id="row6"></tr>
<tr id="row7"></tr>
<tr id="row8"></tr>
<tr id="row9"></tr>
</table>
</div>

For each row create a td element and add to the tr.
For each header create a th and add to the first tr element.
Your table font is set to white makes the text not visible in a white background.
// Select the Table
var tbl = document.getElementById('repairInnerTable');
var trh = document.getElementById('tableHead');
var headerText = ["ID", "Status", "Assigned To"];
var cellText = ["1", "Full", "willy wonka"];
// Set number of rows
var rows = 10;
var columns = headerText.length;
// create table header
for (var h = 0; h < columns; h++) {
var th = document.createElement("th");
th.innerText = headerText[h];
trh.appendChild(th);
}
for (var r = 0; r < rows; r++) {
var tr = document.getElementById("row" + r);
for (var c = 0; c < columns; c++)
{
var td = document.createElement("td");
td.innerText = cellText[c];
tr.appendChild(td);
}
}
<div class="stTableContainer" id="repairsTable">
<table style="width: 100%;" id="repairInnerTable">
<tr id="tableHead">
</tr>
<tr id="row0"></tr>
<tr id="row1"></tr>
<tr id="row2"></tr>
<tr id="row3"></tr>
<tr id="row4"></tr>
<tr id="row5"></tr>
<tr id="row6"></tr>
<tr id="row7"></tr>
<tr id="row8"></tr>
<tr id="row9"></tr>
</table>
</div>

Few things:
You're trying to put a TR inside of a TR. Either create one or use the existing ones, but not both.
you've got th.appendChild in the body section...should be td, not th.
you have to append the td to the tr in the body section.
This should work:
addRepairData();
function addRepairData() {
// Select the Table
var tbl = document.getElementById('repairInnerTable');
var headerText = ["ID", "Status", "Assigned To"];
var cellText = ["1", "Full", "willy wonka"];
// Set number of rows
var rows = 10;
var columns = headerText.length;
var thead = document.getElementById("tableHead");
// create table header
for (var h = 0; h < columns; h++) {
var th = document.createElement("TH");
var thText = document.createTextNode(headerText[h]);
th.appendChild(thText);
thead.appendChild(th);
}
for (var r = 0; r < rows; r++) {
var tr = document.createElement("TR");
var rowid = "row" + r;
tbl.appendChild(tr);
for (var c = 0; c < columns; c++) {
var td = document.createElement("TD");
var tdText = document.createTextNode(cellText[c]);
td.appendChild(tdText);
tr.appendChild(td);
}
}
}
<div class="stTableContainer" id="repairsTable">
<table style="width: 100%;background:gray; color:white;" id="repairInnerTable">
<tr id="tableHead"></tr>
</table>
</div>

Related

How to exclude certain HTML class from JS code

This JavaScript code makes tables responsive:
/* Credits:
https://gist.github.com/jpen365/f34bbff7d9db99f912e1e75193071718 */
var headertext = [];
var headers = document.querySelectorAll("thead");
var tablebody = document.querySelectorAll("tbody");
for (var i = 0; i < headers.length; i++) {
headertext[i]=[];
for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
var current = headrow;
headertext[i].push(current.textContent);
}
}
for (var h = 0, tbody; tbody = tablebody[h]; h++) {
for (var i = 0, row; row = tbody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[h][j]);
}
}
}
My question is how to exclude tables using class all tables with this class is-style-stripes for example this table:
<table class="wp-block-table aligncenter is-style-stripes">
<tbody>
<tr>
<th>Company</th><td>Amazon</td>
</tr>
<tr>
<th>Company</th><td>Google</td>
</tr>
</tbody>
</table>
If you want to get all tables without class you can use
document.querySelectorAll("table:not(.is-style-stripes)")
You will get all tables without that class
If you want tables with this class just use
document.querySelectorAll("table.is-style-stripes")
Then you can search for it's tbody or thead like
table.querySelectorAll("tbody")

Adding table rows and column dynamically with jQuery

I'm trying to add rows and columns to a table using user input values to determine the number of rows and columns dynamically using jQuery. Below is my code which actually adds rows and columns but not according to the user's inputs
function makeGrid() {
let numOfRow = 0; let numOfCol = 0;
$('#submit').on('click', function() {
numOfRow = $('#height').val();
numOfCol = $('#width').val();
for (var i = 1; i <= numOfRow; i++) {
let row = $('.grid-canvas').append('<tr>');
for (col = 1; col <= numOfCol; col++) {
$('tr').append('<td></td>');
}
}
});
}
makeGrid();
Assuming a user inputs numOfRow = 2 and numOfCol = 2, I should have a table like this
<tbody class="grid-canvas">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
Problem is my code seems to be adding extra but I haven't been able to figure it out. This is the result of my code
<tbody class="grid-canvas">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
How do I fix my code?
try changing your code from:
$('#submit').on('click', function() {
numOfRow = $('#height').val();
numOfCol = $('#width').val();
for (var i = 1; i <= numOfRow; i++) {
let row = $('.grid-canvas').append('<tr>');
for (col = 1; col <= numOfCol; col++) {
$('tr').append('<td></td>');
}
}
});
into this
$('#submit').on('click', function() {
numOfRow = $('#height').val();
numOfCol = $('#width').val();
var body = $('.grid-canvas');
for (var i = 1; i <= numOfRow; i++) {
let row = $('<tr></tr>');
for (col = 1; col <= numOfCol; col++) {
row.append('<td></td>');
}
body.append(row);
}
});
what i have done in the above code is created a separate object for the table's body and then once my rows are created with the columns, I append them back to the table object.
Pure javascript code is here
function f(x, y) {
var rows = x,
rowButtonNumber = y;
var table = document.getElementById("myTable");
table.innerHTML = "";
for (var i = 0; i < rows; i++) {
var tr = document.createElement("tr");
table.appendChild(tr);
for (var j = 0; j < rowButtonNumber; j++) {
var td = document.createElement("td");
var btn = document.createElement("button");
btn.innerHTML = "btn " + (i + 1);
btn.id = "btn-" + i;
btn.onclick = function() {
alert(this.innerHTML);
};
td.appendChild(btn);
tr.appendChild(td);
}
}
}
function go() {
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
f(row, col);
}
<html>
<head>
<style>
td {
width: 200px;
height: 200px;
}
button {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
Rows
<input id="row" type="number" placeholder="Rows" />
<br> Columns
<input id="col" type="number" placeholder="Columns" />
<button onclick="go()">Go</button>
<table id="myTable" cellspacing="50">
</table>
</body>
It does not seem you are using the row variable. I would suggest appending newly created td to row instead of $('tr').

Javascript for add cells in table

I have a problem. I need insert cell in a row. The content of cell is an element of an array. But is duplicate... Here my code:
function addFila() {
var iframe = document.getElementById('myFrame');
var table = iframe.contentDocument.getElementsByClassName("head_to_head h2h_home")[0];
var row = table.insertRow(1);
var fila = ["fecha", "liga", "equipolocal", "equipovisitante", "goleslocal", "golesvisitante"];
for (let i = 0; i < 6; i++) {
row.insertCell(i);
for (let x = 0; x <= fila.length; x++) {
row.insertCell(i).innerHTML = fila[i];
}
}
}
What is wrong?
row.insertCell() return new cell. If you want to create cell and use it you should save created cell in variable. You get duplicate because you call insertCell twice. I hope code below can help you
var table = document.querySelector(".table");
var row = table.insertRow(-1);
var fila = ["fecha", "liga", "equipolocal", "equipovisitante", "goleslocal", "golesvisitante"];
for (let i = 0; i < fila.length; i++) {
const insertedCell = row.insertCell(i);
insertedCell.textContent = fila[i];
}
table td {
border: 1px solid lime;
}
<table class="table">
<tbody>
<tr>
<td>cell_1_1</td>
<td>cell_1_2</td>
</tr>
<tr>
<td>cell_2_1</td>
<td>cell_2_2</td>
</tr>
</tbody>
</table>

Create table column-headers dynamically

Right now I cannot figure out how to add headers for all the columns in this code where a html-table are created dynamically
function createTableAndInsert(sqlArray) {
//create table dynamically - only one row by the moment
var table = document.createElement('table');
for (var i = 1; i < 2; i++) {
var tr = document.createElement('tr'); // row
for (var j = 0; j < 8; j++) {
var td = document.createElement('td'); //column
var text = document.createTextNode(sqlArray[j]); //cell
td.appendChild(text);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById('single_fine_view').appendChild(table);
}
You can pass the header list separately to your function and add following code
function createTableAndInsert(sqlArray,headerList) {
var table = document.createElement('table');
var tr = document.createElement('tr'); // Header row
for (var j = 0; j < 8; j++) {
var th = document.createElement('th'); //column
var text = document.createTextNode(headerList[j]); //cell
th.appendChild(text);
tr.appendChild(th);
}
table.appendChild(tr);
for (var i = 1; i < 2; i++) {
var tr = document.createElement('tr'); // row
for (var j = 0; j < 8; j++) {
var td = document.createElement('td'); //column
var text = document.createTextNode(sqlArray[j]); //cell
td.appendChild(text);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById('single_fine_view').appendChild(table);
}
Your structure is:
<tr>
<td>
<div></div>
<div></div>
</td>
</tr>
thead should be appended before each row.
<thead></thead>
<tr>
<td>
<div></div>
<div></div>
</td>
</tr>
Solution:
var thead = document.createElement('thead');
thead.innerHTML = 'Header';
Before table.appendChild(tr);, add this line table.appendChild(thead);
THEAD needs one or more TR elements:
var table = document.createElement('table'); // 'table' may be a reserved word
var tblHead = document.createElement('thead');
var rowHead = document.createElement('tr');
table.appendChild(tblHead);
tblHead.appendChild(rowHead)
for(j=0; j<8; j++) {
var celHead = document.createElement('th');
//the array txtHeaders[] should be passed to your function if you have the values in advance
// otherwise, you can access the header cells later by:
// table.getElementsbyTagName('th')[].innerHTML
celHead.innerHTML = txtHeaders[j]
rowHead.appendChild(celHead)
}
// now do your row & table loops

How to apply CSS to table cell depending on conditions

I have a table with 10 rows and data is
ABC XYZ 30% (ABC)
ABC MNO 91% (XYZ)
var table = document.getElementById("table2");
for (var i = 0, row; row = table.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
var data = col.innerText;
var data1 = data.split(" ");
if(data1[0] == "91%"){
row.cells[j].css( "color", "red" );
}
}
}
I want to add red color to the cells which are above 90%. How to do it.
I know in back-end we can do it but now I am using only html and CSS.
Slight variation in your code can make it works
var table = document.getElementById("table2");
for (var i = 0, row; row = table.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
var data = col.innerText;
// replace % symbol, parse and compare with number
if (+data.replace('%', '') > 90) {
// update style property of cell
col.style.color = "red";
}
}
}
<table id="table2">
<tr>
<td>ABC</td>
<td>XYZ</td>
<td>30%</td>
<td>(ABC)</td>
</tr>
<tr>
<td>ABC</td>
<td>MNO</td>
<td>91%</td>
<td>(XYZ)</td>
</tr>
</table>
If a single column contains the entire string then do something like this
var table = document.getElementById("table2");
for (var i = 0, row; row = table.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
// get the percentage value from string
var data = col.innerText.match(/(\d+(?:\.\d+)?)%/);
// check match found or not then parse and compare with number
if (data && +data[1] > 90) {
// update style property of cell
col.style.color = "red";
}
}
}
<table id="table2">
<tr>
<td>ABC XYZ 30% (ABC)</td>
</tr>
<tr>
<td>ABC MNO 91% (XYZ)</td>
</tr>
</table>

Categories