CODEWITHSUNDEEP
javascripthtml
Amra
Amra

Reputation: 25260

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. 'tdName_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.

Upvotes: 13

Views: 23277

Answers (8)

Lance Pitt
Lance Pitt

Reputation: 23

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

Upvotes: 0

Tim Down
Tim Down

Reputation: 324647

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);
    }
}

Upvotes: 6

Jenn
Jenn

Reputation: 3533

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

Upvotes: 6

Andy E
Andy E

Reputation: 344713

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

Upvotes: 0

Pekka
Pekka

Reputation: 449713

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?

Upvotes: 0

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146588

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>

Upvotes: 2

Sarfraz
Sarfraz

Reputation: 382841

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'

Upvotes: 3

Soufiane Hassou
Soufiane Hassou

Reputation: 17750

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

Upvotes: 0

Related Questions