javascripthtmlclass

How to determine class of an element in Javascript


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.


Solution

  • 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.