I have a JS function that writes the contents of a table on the page to a CSV file.
However, whenever I come across a table cell that has a hyperlink (e.g., <td><a href="https://www.example.com>Cell Value 1</a></td>), I need to write the href value (https://www.example.com in this case) and not the html text (Cell Value 1 in this case)
The code below shows a function that loops over rows and then columns. I have no problems creating a CSV this way, but am struggling to implement the "check" for <a href=""> values.
<script>
function downloadCSV() {
var table = document.getElementById("table-example");
// Array of rowData arrays
var results = [];
// holds data from each table row
var rowData;
//iterate through rows, skipping header
for (var i = 1, row; row = table.rows[i]; i++) {
rowData = [];
//iterate through columns
for (var j = 0, col; col = row.cells[j]; j++) {
// Checking for href and extracing link
let link = $(this).find('a').attr('href');
console.log(link);
if () {
....
}
else {
rowData.push(col.textContent);
}
}
results.push(rowData);
}
If needed, a sample table is:
<button onClick="downloadCSV()">Download CSV</button>
<table id="table-example">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
My goal was to implement an if-else where I would add the value of the href to the array is the table cell had one, or add the html text if not. However, the link variable is always undefined, even while iterating on a column that I know has an <a href="">.
Edit:
Following Taplar's suggestion that using $(this) in the for-loop was misguided, I came up with the following solution:
for (var j = 0, col; col = row.cells[j]; j++) {
// Checking for href and extracing link
var links = col.getElementsByTagName('a');
if (links.length > 0) {
var cellData = links[0].getAttribute('href');
} else {
var cellData = col.textContent;
}
rowData.push(cellData);
I aggree with Taplar about this.
Bellow i think is what you are looking for.
function downloadCSV() {
var table = document.getElementById("table-example");
// Array of rowData arrays
var results = [];
// holds data from each table row
var rowData;
for (var i = 1; row = table.rows[i]; i++) {
rowData = [];
//iterate through columns
for (var j = 0, col; col = row.cells[j]; j++) {
var cell = $(row.cells[j]);
var hashref = cell.find('a');
// Cause it get a collection
if (hashref.length > 0 && hashref.length === 1) {
rowData.push(hashref.attr('href'));
} else {
rowData.push(col.textContent);
}
} // end for cell
results.push(rowData);
} // end row
console.log(results);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onClick="downloadCSV()">Download CSV</button>
<table id="table-example">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
My solution was the following:
for (var j = 0, col; col = row.cells[j]; j++) {
// Checking for href and extracing link
var links = col.getElementsByTagName('a');
if (links.length > 0) {
var cellData = links[0].getAttribute('href');
} else {
var cellData = col.textContent;
}
rowData.push(cellData);
Related
I've a table in HTML looks like this:
Subjects
n1
n2
n3
subject1
10
0
0
subject2
0
5
20
<table>
<thead>
<tr>
<th class="subject">Subjects</th>
<th>n1</th>
<th>n2</th>
<th>n3</th>
</tr>
</thead>
<tbody>
<tr>
<th class="subject">subject1</th>
<td>10</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th class="subject">subject2</th>
<td>0</td>
<td>5</td>
<td>20</td>
</tr>
</tbody>
</table>
Is there any thought or approach with javascript I could re-order columns in a specific order let order = ['n2','n1','n3']:
Subjects
n2
n1
n3
subject1
0
10
0
subject2
5
0
20
I've solved by turning the table into 2-dimensional array and sort it and turn it back into table HTML:
function tableToArray(tbl, opt_cellValueGetter) {
opt_cellValueGetter = opt_cellValueGetter || function(td) {
return td.textContent || td.innerText;
};
var twoD = [];
for (var rowCount = tbl.rows.length, rowIndex = 0; rowIndex < rowCount; rowIndex++) {
twoD.push([]);
}
for (var rowIndex = 0, tr; rowIndex < rowCount; rowIndex++) {
var tr = tbl.rows[rowIndex];
for (var colIndex = 0, colCount = tr.cells.length, offset = 0; colIndex < colCount; colIndex++) {
var td = tr.cells[colIndex],
text = opt_cellValueGetter(td, colIndex, rowIndex, tbl);
while (twoD[rowIndex].hasOwnProperty(colIndex + offset)) {
offset++;
}
for (var i = 0, colSpan = parseInt(td.colSpan, 10) || 1; i < colSpan; i++) {
for (var j = 0, rowSpan = parseInt(td.rowSpan, 10) || 1; j < rowSpan; j++) {
twoD[rowIndex + j][colIndex + offset + i] = text;
}
}
}
}
return twoD;
}
let order = ['n2', 'n1', 'n3', "Subjects"];
const sort2dArrayColumsByFirstRow = (array) => {
if (!Array.isArray(array)) return [];
const sortedFirstRow = array[0]
.map((item, i) => ({
v: item,
i: i
}))
.sort((a, b) => {
return order.indexOf(a.v) - order.indexOf(b.v);
});
return array.map((row) => row.map((_, i) => row[sortedFirstRow[i].i]));
};
function arrayToTable(columnNames, dataArray) {
var myTable = document.createElement('table');
var y = document.createElement('tr');
myTable.appendChild(y);
for (var i = 0; i < columnNames.length; i++) {
var th = document.createElement('th'),
columns = document.createTextNode(columnNames[i]);
th.appendChild(columns);
y.appendChild(th);
}
for (var i = 0; i < dataArray.length; i++) {
var row = dataArray[i];
var y2 = document.createElement('tr');
for (var j = 0; j < row.length; j++) {
myTable.appendChild(y2);
var th2 = document.createElement('td');
var date2 = document.createTextNode(row[j]);
th2.appendChild(date2);
y2.appendChild(th2);
}
}
document.querySelector('#tableEl').innerHTML = myTable.innerHTML;
}
let arr = tableToArray(document.querySelector('#tableEl'))
console.log('before:', arr)
let arrOrdered = sort2dArrayColumsByFirstRow(arr);
console.log('after:', arrOrdered);
arrayToTable(arrOrdered[0], arrOrdered.slice(1))
<table id="tableEl">
<thead>
<tr>
<th class="subject">Subjects</th>
<th>n1</th>
<th>n2</th>
<th>n3</th>
</tr>
</thead>
<tbody>
<tr>
<th class="subject">subject1</th>
<td>10</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th class="subject">subject2</th>
<td>0</td>
<td>5</td>
<td>20</td>
</tr>
</tbody>
</table>
This is a good DOM question.
Tables are modified by the TABLE API.
https://html.spec.whatwg.org/multipage/tables.html
The TABLE element has THEAD, TFOOT, and TBODY elements. Use of these elements provides structure for your javascript. (Good job so far).
<table id="s-table">
<thead>
<tr>
<th class="subject">Subjects</th>
<th>n1</th>
<th>n2</th>
<th>n3</th>
</tr>
</thead>
<tbody>
<tr>
<th class="subject">subject1</th>
<td>10</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th class="subject">subject2</th>
<td>0</td>
<td>5</td>
<td>20</td>
</tr>
</tbody>
</table>
Next, you'll need some javascript.
You'll also find insertBefore, and possibly before, and after Element methods handy.
https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore
Get the TBODY element.
For each row, reorder(cell[i], cell[j]).
Let's start with
function resortTBody(tBody) {
const rows = tBody.rows;
for(let i = 0; i < tBody.rows.length; i++) {
reorderRow(rows[i]);
}
}
function reorderRow(row) {
let cells = row.cells;
row.insertBefore(cells[2], cells[1]);
}
This code has a hard-coded swap of cells. To reorder the cells to match a specific order, you'll need to modify reorderRow:
reorderRow(row, newOrder);
The TH's can be similarly reordered.
Design Notes: It's a good idea to minimize scope of identifiers. That is, put them in scope only as broad as it can be maximally justified.
If reorderRow is only needed for resortTbody, it can be restricted to private access.
let resortTBody = function(tBody) {
function resortTBodyInner(tBody) {
const rows = tBody.rows;
for(let i = 0; i < tBody.rows.length; i++) {
reorderRow(rows[i]);
}
}
function reorderRow(row) {
let cells = row.cells;
row.insertBefore(cells[2], cells[1]);
}
resortTBodyInner(tBody);
resortTBody = resortTBodyInner;
};
It might be desirable to maintain the column headers but resort their contents. That would require a subtle change to the approach.
It might be desirable to reset the table to its original state. All of that can be done.
The following one-liner will reorganize the columns in the desired order:
document.querySelectorAll("#tableEl tr").forEach(tr=>[...tr.children].forEach((_,i,a)=>tr.append(a[[0,2,1,3][i]])));
<table id="tableEl">
<thead>
<tr>
<th class="subject">Subjects</th>
<th>n1</th>
<th>n2</th>
<th>n3</th>
</tr>
</thead>
<tbody>
<tr>
<th class="subject">subject1</th>
<td>10</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th class="subject">subject2</th>
<td>0</td>
<td>5</td>
<td>20</td>
</tr>
</tbody>
</table>
I have a script that collects data from an array and uses these to generate a dynamic table. Some of these values in the array are Font Awesome styles.
My existing script inserts all the values in the array into each table cell.
The intention is for the Font Awesome style values to be inserted as a cell style, during the rendering of the table.
In the code below, notice that the array properties for paymentStatus stores a CSS Font Awesome style value.
var array = [{
amount: 12,
payersNumber: 1245,
paymentStatus: class="fas fa-exclamation-triangle"
}];
table = document.getElementById("table");
var currentTransaction;
var keys = ["payersNumber", "amount", "paymentStatus"];
for (var i = 0; i < array.length; i++) {
console.log("Number of transactions: " + array.length);
var newRow = table.insertRow(table.length);
currentTransaction = array[i];
for (var b = 0; b < keys.length; b++) {
var cell = newRow.insertCell(b);
cell.innerText = currentTransaction[keys[b]];
}
}
How do I get the paymentStatus values to get inserted into the table as the style for each <th>Status</th> column?
Find below the HTML table that my existing code geneates:
<table id="table" border="1">
<tr>
<th>Amount</th>
<th>Number</th>
<th>Status</th>
</tr>
</table>
<tr>
<td> 12 </td>
<td> 1245 </td>
<td> class="fas fa-exclamation-triangle" </td>
</tr>
For the Font Awesome style to successfully be put in effect, it needs to be inserted into the <td> </td> as a class style.
The desired effect would, therefore, look like this:
<table id="table" border="1">
<tr>
<th>Amount</th>
<th>Number</th>
<th>Status</th>
</tr>
<tr>
<td>12</td>
<td>1245</td>
<td class="fas fa-exclamation-triangle"></td>
</tr>
</table>
Inside the nested for-loop you can make a distinction based on the current value of keys[b]. If it's paymentStatus add an <i> tag with the css for the font awesome exclamation mark and use the .innerHTML property of the cell. If it's something else just assign the appropriate text to the .innerText proeprty.
var array = [{
amount: 12,
payersNumber: 1245,
paymentStatus: "okay"
}, {
amount: 24,
payersNumber: 3345,
paymentStatus: "okay"
}, {
amount: 45,
payersNumber: 4534,
paymentStatus: "not okay"
}];
table = document.getElementById("table");
var currentTransaction;
var keys = ["payersNumber", "amount", "paymentStatus"];
for (var i = 0; i < array.length; i++) {
var newRow = table.insertRow(table.length);
currentTransaction = array[i];
for (var b = 0; b < keys.length; b++) {
var cell = newRow.insertCell(b);
if (keys[b] == "paymentStatus") {
cell.innerHTML = "<i class='fas fa-exclamation-triangle'></i>" + currentTransaction[keys[b]];
} else {
cell.innerText = currentTransaction[keys[b]];
}
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/v4-shims.css">
<table id="table" border="1">
<tr>
<th>Number</th>
<th>Amount</th>
<th>Status</th>
</tr>
</table>
You can use classList.add method to add css class to HTML element as follows:
for (var b = 0; b < keys.length; b++) {
var cell = newRow.insertCell(b);
if (keys[b] == 'paymentStatus') {
let className = '';
// it is assumed that paymentStatus value format is consistent
const classNameArr = currentTransaction[keys[b]].split('=');
if (classNameArr.length === 2) {
className = classNameArr[1];
cell.classList.add(className);
}
} else {
cell.innerText = currentTransaction[keys[b]];
}
}
function tablecollapse()
{
var table = document.getElementById(tblbatting);
var rowCount = table.rows.length;
for(var i=4; i< rowCount; i++)
{
var row = table.rows[i];
row.display="none";
}
}
I have this code running onload() but the table's connect aren't hiding.
What is wrong with this code? or any other suggestions?
What Wayne said. He was a lot faster than me.
function tablecollapse(id) {
var table = document.getElementById(id);
var rows = table.rows;
for (var i = 4; i < rows.length; i++) {
rows[i].style.display = "none";
}
}
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<table id="foo">
<thead>
<td>Column</td>
<td>Column</td>
</thead>
<tr>
<td>one</td>
<td>one</td>
</tr>
<tr>
<td>two</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>three</td>
</tr>
<tr>
<td>four</td>
<td>four</td>
</tr>
<tr>
<td>five</td>
<td>five</td>
</tr>
</table>
<button onclick="tablecollapse('foo')">Collapse</button>
There are two errors in the code. First, you need to put quotes around the table element id in var table = document.getElementById(tblbatting);. So, this code becomes var table = document.getElementById("tblbatting");.
Second, to set the display style, you need to access the style property of the table row element. So row.display="none"; becomes row.style.display="none";.
var table = document.getElementById("tblbatting");
var rowCount = table.rows.length;
for(var i=4; i< rowCount; i++)
{
var row = table.rows[i];
row.style.display="none";
}
I am not sure if you have done it deliberately or not, but you should be aware that your code will not hide the first 4 rows of the table because you have used var i=4 to initialise your loop counter.
I am trying to make a table which will display colours for odd and even table rows, not sure where I'm going wrong
HTML:
<table id="tableStyles" border="1">
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<tr>
<td>Odd</td>
<td>Odd</td>
<td>Odd</td>
</tr>
<tr>
<td>Even</td>
<td>Even</td>
<td>Even</td>
</tr>
<tr>
<td>Odd</td>
<td>Odd</td>
<td>Odd</td>
</tr>
<tr>
<td>Odd</td>
<td>Odd</td>
<td>Odd</td>
</tr>
</table>
JS:
var isEven = function(someNumber) {
return (someNumber%2 == 0) ? true : false;
};
if isEven = true {
var styletab = document.getElementsByTagName("tableStyles");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < styletab.length; i++) {
styletab[i].style.fontSize = "12px";
styletab[i].style.color = "blue";
}
} else {
var styletab = document.getElementsByTagName("tableStyles");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < styletab.length; i++) {
styletab[i].style.fontSize = "12px";
styletab[i].style.color = "red";
}
}
I'd suggest:
Array.prototype.forEach.call(document.querySelectorAll('#tableStyles tr'), function (tr) {
tr.classList.add((tr.rowIndex%2 === 0 ? 'even' : 'odd'));
});
This presumes you have styles set, in CSS, for tr.odd and tr.even; also that you're using a relatively up-to-date browser; Internet Explorer 8+ for document.querySelectorAll(), and Internet Explorer 9+ for Array.prototype.forEach().
Array.prototype.forEach.call(document.querySelectorAll('#tableStyles tr'), function(tr) {
// rowIndex is the index of the current <tr> in the table element:
tr.classList.add((tr.rowIndex % 2 === 0 ? 'even' : 'odd'));
});
.even {
color: red;
}
.odd {
color: blue;
}
<table id="tableStyles" border="1">
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<tr>
<td>Odd</td>
<td>Odd</td>
<td>Odd</td>
</tr>
<tr>
<td>Even</td>
<td>Even</td>
<td>Even</td>
</tr>
<tr>
<td>Odd</td>
<td>Odd</td>
<td>Odd</td>
</tr>
<tr>
<td>Odd</td>
<td>Odd</td>
<td>Odd</td>
</tr>
</table>
Alternatively, if you wanted to stripe only those elements selected (without reference to the rowIndex):
Array.prototype.forEach.call(document.querySelectorAll('#tableStyles tbody tr'), function(tr, collectionIndex) {
// collectionIndex (regardless of name, it's the second argument) is
// the index of the current array-element in the array/collection:
tr.classList.add((collectionIndex % 2 === 0 ? 'even' : 'odd'));
});
Array.prototype.forEach.call(document.querySelectorAll('#tableStyles tbody tr'), function(tr, collectionIndex) {
tr.classList.add((collectionIndex % 2 === 0 ? 'even' : 'odd'));
});
.even {
color: red;
}
.odd {
color: blue;
}
<table id="tableStyles" border="1">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Odd</td>
<td>Odd</td>
<td>Odd</td>
</tr>
<tr>
<td>Even</td>
<td>Even</td>
<td>Even</td>
</tr>
<tr>
<td>Odd</td>
<td>Odd</td>
<td>Odd</td>
</tr>
<tr>
<td>Odd</td>
<td>Odd</td>
<td>Odd</td>
</tr>
</tbody>
</table>
From the code I can see that you are new to JS. So I think it is good to point out where you are going wrong, than fixing the whole thing for you.
//Here you are creating a function to return true or false using a function which
//already returning true or false.
var isEven = function(someNumber) {
return (someNumber%2 == 0) ? true : false;
};
//above can be reduced to this.
(someNumber%2==0); //will return true if even and false if odd.
// The syntax of if statement is wrong. It should be if (statement) { do stuff here...}
// Notice the difference between '=' and '=='. The first assigns value and the second checks if both sides are same.
// The isEven function should have an input to give either true or false.
// Finally you should first get the rows in the table as an array and loop through it and then do this if statement.
if isEven = true {
var styletab = document.getElementsByTagName("tableStyles");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < styletab.length; i++) {
styletab[i].style.fontSize = "12px";
styletab[i].style.color = "blue";
}
} else {
var styletab = document.getElementsByTagName("tableStyles");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < styletab.length; i++) {
styletab[i].style.fontSize = "12px";
styletab[i].style.color = "red";
}
}
// the above should be organised in the format below.
var table = ;//get the table here.
var rows = ;//get the rows in the table here.
for (i in rows) {
var row = rows[i]; //get the current row
var cells = ;//get cells from the current row
if(i%2==0) {
//set formatting for the cells here if the row number is even.
} else {
//set formatting for the cells here if the row number is odd.
}
}
Make sure you are absolutely sure of how the selectors (getElementById etc) work and what do they return so that you can use them correctly. for example getElementsByTagName searches based on the tag name ('div' 'table' etc) but getElementById searches by the id of the tags - 'tableStyles' in this case. Hope I pointed you in the right direction.
Final Correct answer provided by Balamurugan Soundarara
//Here we are searching for the document for element with the id 'tableStyles'. This returns only one DOM element.
var table = document.getElementById("tableStyles");
//Here we are searching the table element for all elements of the tag 'tbody'. This returns an array of elements. Here there is only one so we just use the first one (hence the [0] at the end)
var body = table.getElementsByTagName("tbody")[0];
//Here we are searching the body element for all elements of the tag 'tr'. This returns an array of row elements.
var rows = body.getElementsByTagName("tr");
//Here we are looping through the elements in the rows array.
for (var i=0 ; i<rows.length; i++) {
//Here we select the nth row in the array based on the loop index.
var row = rows[i];
//Here we are searching the row element for all elements of the tag 'td'. This returns an array of cells in the row.
var cells = row.getElementsByTagName("td");
//We are looping through all the cells in the array.
for(var j=0; j<cells.length; j++) {
//set the fontsize
cells[j].style.fontSize = "12px";
//check if the row is even. see how we dont need the isEven function. you can directly use the == function with the modulo operator.
if( i%2==0 ) {
//if it is even then the color is set to blue
cells[j].style.color = "blue";
} else {
//if it is even then the color is set to blue
cells[j].style.color = "red";
}
}
}
http://jsfiddle.net/ar5suz2g/4/
I don't know JQuery, so I'm hoping there is a way to do this in pure Javascript.
I need to click on a table row and get the value of each cell in that row. Here is the format of my table:
<table class='list'>
<tr>
<th class='tech'>OCB</th>
<th class='area'>Area</th>
<th class='name'>Name</th>
<th class='cell'>Cell #</th>
<th class='nick'>Nickname</th>
</tr>
<tr onclick="somefunction()">
<td>275</td>
<td>Layton Installation</td>
<td>Benjamin Lloyd</td>
<td>(801) 123-456</td>
<td>Ben</td>
</tr>
</table>
Is there anyway short of putting a unique ID to each cell?
There is no need to add ids or add multiple event handlers to the table. One click event is all that is needed. Also you should use thead and tbody for your tables to separate the heading from the content.
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
alert(data);
};
<table class='list'>
<thead>
<tr>
<th class='tech'>OCB</th>
<th class='area'>Area</th>
<th class='name'>Name</th>
<th class='cell'>Cell #</th>
<th class='nick'>Nickname</th>
</tr>
</thead>
<tbody>
<tr>
<td>275</td>
<td>Layton Installation</td>
<td>Benjamin Lloyd</td>
<td>(801) 123-456</td>
<td>Ben</td>
</tr>
</tbody>
</table>
Example:
http://jsfiddle.net/ZpCWD/
Check this fiddle link
HTML:
<table id="rowCtr" class='list'>
<thead>
<tr>
<th class='tech'>OCB</th>
<th class='area'>Area</th>
<th class='name'>Name</th>
<th class='cell'>Cell #</th>
<th class='nick'>Nickname</th>
</tr>
</thead>
<tbody>
<tr>
<td>275</td>
<td>Layton Installation</td>
<td>Benjamin Lloyd</td>
<td>(801) 123-456</td>
<td>Ben</td>
</tr>
</tbody>
</table>
JAVASCRIPT:
init();
function init(){
addRowHandlers('rowCtr');
}
function addRowHandlers(tableId) {
if(document.getElementById(tableId)!=null){
var table = document.getElementById(tableId);
var rows = table.getElementsByTagName('tr');
var ocb = '';
var area = '';
var name = '';
var cell = '';
var nick = '';
for ( var i = 1; i < rows.length; i++) {
rows[i].i = i;
rows[i].onclick = function() {
ocb = table.rows[this.i].cells[0].innerHTML;
area = table.rows[this.i].cells[1].innerHTML;
name = table.rows[this.i].cells[2].innerHTML;
cell = table.rows[this.i].cells[3].innerHTML;
nick = table.rows[this.i].cells[4].innerHTML;
alert('ocb: '+ocb+' area: '+area+' name: '+name+' cell: '+cell+' nick: '+nick);
};
}
}
}
var elements = document.getElementsByTagName('td');
for (var i =0; i < elements.length; i++) {
var cell_id = 'id' + i;
elements[i].setAttribute('id', cell_id);
}
Maybe put something like this in function your onclick links to from the tr?
$("tr").click(function () {
var rowItems = $(this).children('td').map(function () {
return this.innerHTML;
}).toArray();
});
This shows the row's first cell which is clicked according to dataTr.querySelectorAll("td")[0].innerText;
document.querySelector("#myTable").addEventListener("click",event => {
let dataTr = event.target.parentNode;
let dataRes = dataTr.querySelectorAll("td")[0].innerText;
console.log(dataRes);
});