Question

heres the problem, our css classnames for a span element keeps changing whenever we generate. so to simplify, we have a span element

<tr>
   <td>
       <span class=1234>My Name is BouncingHippo</span>
   </td>
        ....other well-defined DOM elements with id etc...
 </tr>

i have a radio button somewhere on the html, where onchange, it will change the font-color of the span element.

The span element has no id, no name, and a span class that changes all the time. My current method is brute-force getElementsByTagName() to return a specific line using innerHTML for every <tr> and insert the style attribute that way.

Is there a better way for this? Reason why span class changes every generation is for security purposes stipulated by our client..

EDIT 1

a rough concept on jsfiddle of the brute-force method that i have yet to get it working..
http://jsfiddle.net/3jVnJ/1/

Answer 1

Here’s one option based on the idea in your jsFiddle:

function findParentTag(obj, tag) {
    tag = tag.toUpperCase();
    while (obj && obj.tagName !== tag) {
        obj = obj.parentNode;
    }
    return(obj);
}

function changeColor(obj){
    var table = findParentTag(obj, "table");
    var spans = table.getElementsByTagName("span");
    for (var i = 0; i < spans.length; i++) {
        if (spans[i].className) {
            spans[i].style.color = "red";
            break;
        }
    }
}                
    ​

Working demo: http://jsfiddle.net/jfriend00/kZQJq/