I want to determine the class name of existing table TD elements (using the Chrome Javascript).
My case is table rows all like
<tr><td class="ns"><a href="a link">a name</a><td> ...
I want to find that "ns" and others (they vary a little) to process some rows differently.
The easy assumed way would seem to be the className on cells[0], but in the Chrome debugger it is "" (blank) ... THiS IS AN INCORRECT STATEMENT
I found something like this next marked line. This was my interpretation:
for (let row = Obj.rowcnt - 1; row > 0; row--) {
let x0 = Obj.tbl,rows[row].cells[0];
let clas = x0.constructor.name; // <---<<
console.log(clas + " " + x0.constructor.name);
...
But I obviously interpreted it wrong, and all I see is "HTMLTableCellElement HTMLTableCellElement"
I don't find "constructor.name" in the table td elements.
EDIT:
Thank you, you hit it dead on. Some of my rows do have a "" className, and I got confused and mixed up and made the wrong conclusion on wrong row. I am in good shape now, thank you.
To get the class name of a TD element in Chrome's JavaScript console, use className
or getAttribute('class')
instead of constructor.name
, which returns the element type (HTMLTableCellElement
) rather than the CSS class.
Here's a concise fix for your code:
for (let row = Obj.rowcnt - 1; row > 0; row--) {
let x0 = Obj.tbl.rows[row].cells[0];
let clas = x0.className; // Gets class, e.g., "ns"
console.log(clas);
// Process rows based on clas
}
If className
returns ""
, verify the TD has a class attribute (e.g., <td class="ns">
) in Chrome DevTools. Alternatively, use x0.getAttribute('class')
for the same result.