Can you getElementsByName if you only have partial name on javascript?_问答_开发者

I have a repeating table where the name of the elements would be (e.g. 'tdNa开发者_Python百科me_1' 'tdName_2'), and I was wondering if it would be possible to getElementsByName('tdName_').

PS: I can not use Jquery.

Thanks In advance.

Cesar.

This is not possible. I'm assuming for the rest of this answer that the elements you're interested in are <td>s. If so, then you should be aware that the name attribute is not valid for <td> elements.

You will have to create a list of matching elements manually. If you decide to use the name attribute anyway (instead of, say, adding a class in the class attribute), something like the following will work:

var table = document.getElementById("your_table_id");
var tds = table.getElementsByTagName("td");
var matchingTds = [];

for (var i = 0, len = tds.length, td, tdName; i < len; ++i) {
    td = tds[i];
    tdName = td.getAttribute("name");
    if (tdName && tdName.indexOf("tdName_") == 0) {
        matchingTds.push(td);
    }
}

With vanilla javascript you can use the querySelectorAll method:

document.querySelectorAll('[name^=tdName]')

This should work in all modern browsers, including IE9 or later (though I haven't tested it yet).

Not easy or probably possible with getElementsByClassName but you can put JQuery at rescue:

$('td[name=tdName_1]') // matches exactly 'tdName_1'

$('td[name^=tdName]') // matches those that begin with 'tdName'

Obviously, not. But you can use getElementsByTagName() and then filter by name:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"><!--
function find(){
    var inputs = document.getElementById("foo").getElementsByTagName("input");
    var found = [];
    for(var i=0, len=inputs.length; i<len; i++){
        if(inputs[i].name.match(/^tdName_\d+$/)){
            found.push(inputs[i]);
        }
    }
    alert(found.length + " elements found");

}
//--></script>
</head>
<body>

<form action="" method="post" id="foo">
    <input type="text" name="tdName_1">
    <input type="text" name="tdName_2">
    <input type="text" name="tdName_3">
    <input type="text" name="not_me">
    <input type="text" name="tdName_4">
    <input type="text" name="neither_me">
    <input type="text" name="tdName_5">
    <input type="button" onclick="find()" value="Find">
</form>

</body>
</html>

AFAIK, getElementsByName requires a static string as an argument.

I don't know if you have any control over the elements, but you should probably give them the same name and use getElementsByName.

Another solution would be to loop through names and use getElementByName('tdName_' + i).

No, you would have to fetch all relevant elements - e.g. using getElementsByTagName - and loop through them until you find one or more elements that fit your criteria.

Maybe you can work around using getElementsByClassName and give every element you want to match a certain class? (Update, the native version is not availalable on SO, thanks Andy E. This is a very popular workaround implementation.)

You say you can't use JQuery and I'm sure you have a good reason for that, but stuff like this is what Frameworks are there for. Would Prototype or MooTools be an option?

As Tim Down said, the name attribute is not valid for <td> elements. It should still work if you decide to use it though. One option is to use a while loop, like this:

function getAllNamedTDs ()
{
    var cTD, i=1, elArr = []; 

    // If an element with "tdName_"+i is not found, exit the loop
    while (cTD = document.getElementByName("tdName_"+(i++)))
        elArr.push(cTD);

    // return the array of elements or null if no elements were found.
    return elArr.length ? elArr : null;
}

Instead of using the name attribute, you should use the id attribute and then replace getElementByName with getElementById

put TWO (2) names on each element you want to find... make the first class name the same on every element and the second class name 'tdName_1' or 'tdName_2' (or whatever). Run document.getElementsByClassName on the class name common to all your elements... then loop through the array, do className.split(' ') to get an array where array[0] is the common name and array[1] is the differentiated name, and... do what you need to ...