Questions › Can't retrieve the data from table using getAttribute() in Javascript
blerrr Asked

Right now I'm learning nodes. before that I'm sorry if my question isn't specific please let me know how to state it better.

This code is for deleting element attributes. There's a color in the table column and when I press button the attribute bgcolor in td tag is gone.

When I run it, it always show tdelement is null? while I already use for statement to loop and check it.

And please answer it using Javascript.

function removeColor(color) 
{ 
  var table = document.getElementById("multi");
  var tdList = table.getElementsByTagName("td");

  // Loop through list <td> elements.
  for (var i = 0; i <= tdList.length; i++)
  {
    var tdElement = tdList.item(i);

    // Get the attribute.
    var colorAtt = tdElement.getAttribute("value");

    //If the attribute matches the color then delete attributes
    if (colorAtt == color)
    {
        tdElement.removeAttributeNode(colorAtt);
    }
  }
}

// the end for javascript -----------------

<table id="multi" border="1">
<tr>
    <td></td>
    <td bgcolor="#ff0000">1</td>
    <td bgcolor="#008000">2</td>
    <td bgcolor="#ffff00">3</td>
</tr>
<tr>
    <td bgcolor="#ff0000">1</td>
    <td bgcolor="#ff0000">1</td>
    <td bgcolor="#008000">2</td>
    <td bgcolor="#ffff00">3</td>
</tr>
<tr>
    <td bgcolor="#008000">2</td>
    <td bgcolor="#008000">2</td>
    <td bgcolor="#008000">4</td>
    <td bgcolor="#ffff00">6</td>
</tr>
<tr>
    <td bgcolor="#ffff00">3</td>
    <td bgcolor="#ffff00">3</td>
    <td bgcolor="#ffff00">6</td>
    <td bgcolor="#ffff00">9</td>
</tr>

</table>

<button onclick="removeColor('#ff0000')">Remove Red Background</button><br>

1 Answers :
BenG answered

try this

function removeColor(color) 
{ 
  var table = document.getElementById("multi");
  var tdList = table.getElementsByTagName("td");

  // Loop through list <td> elements.
  for (var i = 0; i <= tdList.length; i++)
  {
    var tdElement = tdList.item(i);

    // Get the attribute.
    var colorAtt = tdElement.getAttributeNode("bgcolor");

    //If the attribute matches the color then delete attributes
    if (colorAtt && (colorAtt.value == color))
    {
        tdElement.removeAttributeNode(colorAtt);
    }
  }
}

using .getAttribute("value"); would try to get the attribute 'value' from the element. where you need to get the node .getAttributeNode("bgcolor");.

Fiddle

blerrr replied
Already used that before. It said TypeError: tdElement.getAttributedNode is not a function var colorAtt = tdElement.getAttributedNode("bgcolor");;
BenG replied
try the fiddle. works fine.;
BenG replied
also, its not getAttributedNode, its getAttributeNode without the d.;
blerrr replied
After I copy paste with fiddle code it really does work. Before it I already check multiple times what's wrong with my code and nothing wrong. Variable and syntax is fine for me. And then check again with yours also nothing different. I wonder why it can happen like that. Thanks BG101 for helping me !!;