javascript: access elements within a table

Question

I'm pretty new to javascript. I have this sample table. I want to be able to get the "http://www.msn.com" but haven't been able to do so. How should I do this?

thanx in advance

j

<body>
    <div id="tableContainer">
        <table width="100%">
            <thead>
                <tr>
                    <th width="16%" >  </th >
                    <th width="62%"> Otras acciones</th >
                    <th class="sort" width="2%"> Código certificado</th>
                    <th class="sort" > Descripción</th>
                </tr>
            </thead>
            <tbody> 
                <tr>
                    <td class="iconos" >  
                        <span class="sigAccion">                
                            <a href="#" class="sigIcnHref" title="Duplicar" />
                            <span class=" btnDuplicar">
                            </span></a>
                            <a href="http://www.msn.com" class="sigIcnHref" title="Modificar" />
                           <span class=" btnModificar">
                            </span></a>
                            </span> </td>   
              <td  class="AccionRegistro">
                <ul>
                  <li>
                  <a href="#" >Docència </a></li>
                  <li>
                  <a href="#" >Matrícula(S) </a></li>
                  <li>
                  <a href="#" >Plans(1) </a></li>
                  <li>
                  <a href="#" >Professors(1)  </a></li>
                  <li>
                  <a href="#" >Horaris(9)  </a></li>
                  <li>
                  <a href="#" >HorarisProfessors(1) </a></li>
                </ul></td> 
              <td > <sup>2</sup>CAMD</td>
              <td> Cert. Alumno Matriculado Ext.</td>
            </tr>          
            </tbody>  
        </table>
    </div>
</body>

lincolnk · Accepted Answer · 2010-06-14 14:18:52Z

2

straight javascript is pretty easy.

grab a reference to a known element above the a element higher up the tree get a list of a elements under the known element match the href property to the value you know

var anchor = null;
var container;
var items;

container = document.getElementById('tableContainer');
items = container.getElementsByTagName('a');

for (var j = 0; j < items.length; j++) {
    if (items[j].href === 'http://www.msn.com') {
        anchor = items[j];
        break;
    }
}

it would be better if you could directly reference the table element and then get a list of a elements from there, but if that's the only table in tableContainer it's fine.

for checking the href property for a known value, i usually go with a case-insensitive regex but this should be fine for your case.

answered Jun 14, 2010 at 14:18

lincolnk

11.2k4 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

javier Over a year ago

I think I got it. I made a couple of changes to your answer but still it did send me in the direction I wanted to go in the first place. thanx! var href; var links = document.links; for (var i = 0; i < links.length; i++) { if (links[i].title == 'Modificar') { href = links[i].href; alert("Link no." + i +": " + href); } }

Guffa · Accepted Answer · 2010-06-14 13:36:06Z

0

Using a framework like jQuery it's pretty simple:

var href = $('#tableContainer .iconos a[title=Modificar]').attr('href');

Using plain Javascript it's more complicated if you can't simply add an id to the element to make it easier to locate it. You can for example look through all links in the page:

var href;
var links = document.links;
for (var i = 0; i < links.length; i++) {
  if (links[i].title == 'Modificar') href = links[i].href;
}

answered Jun 14, 2010 at 13:36

Guffa

703k112 gold badges760 silver badges1k bronze badges

2 Comments

lincolnk Over a year ago

is it acceptable to use document.links? things like document.forms are generally discouraged.

2ndkauboy Over a year ago

an my answer you complain about the usage of frameworks and here you complain about the usage of a generic JS functionality? OK, document.links is not very good as it selects every link and not only those within the table. But it is not always a bad idea.

Siddiq Baig · Accepted Answer · 2013-11-13 08:20:55Z

0

you can also do this by using jQuery

$('#tableContainer a').each(function() {    
    if (this.href == 'http://www.msn.com'){
           // Do something like  $(this).hide(); 
    }
    else {
       // Do somthing like $(this).show();

          }
        });

here is an example of JSFiddle

edited Nov 13, 2013 at 8:20

answered Nov 13, 2013 at 8:14

Siddiq Baig

5862 gold badges17 silver badges37 bronze badges

Comments

2ndkauboy · Accepted Answer · 2010-06-14 13:35:36Z

-1

If the structure is always like this, a code for Prototype would look like this:

var allLinks = $$('#tableConatiner tbody tr td span a');
var msnLInk = allLinks[1].href;

You can also use jQuery with a similar selector or even pure JS which will need some additional selections. But using an id attribute (e.g. "msnLink") you can get it using a direct selection:

var msnLink = $('msnLink').href;

I can you extend the code with an ID?

EDIT: If the title or class is unique and always the same you can also use one of the following lines:

var msnLink = $$('a[class="sigIcnHref"]').first().href;
var msnLink = $$('a[title="Modificar"]').first().href;

Can you give us some more information about the structure and what you want to do with the element after selecting it?

answered Jun 14, 2010 at 13:35

2ndkauboy

9,4033 gold badges34 silver badges67 bronze badges

5 Comments

javier Over a year ago

The idea would be that the first column could have 1-3 buttons. When it has one, it should take the link associated to it and assign it to the whole row so you can click on it and it would do the same thing as if you'd click on the button directly. I know how to assign a given address to the whole row, but the thing is that the one I need to get is the one inside these buttons. I'd like to know if it's possible just using javascript, no html mod and no jquery as these options would require major modifications to the code. thanx

lincolnk Over a year ago

nobody mentioned using prototype or jquery. libraries should not be assumed.

2ndkauboy Over a year ago

Nobody either mentioned not to use them. He mentioned that he is new to JS so giving him the advice to pick a framework like Prototype or jQuery IS a good idea. His comment that he doesn't want to take any framework was given after I posted my answer. So where is the problem with my answer?

lincolnk Over a year ago

so all option not mentioned by the OP should be assumed as fair game? why not tell him to build a flash applet that scrapes the page for him? i made my comment before reading javier's. if you want to suggest a framework, a comment on the question would be a good place to do it. and concerning my comment about document.links, i haven't ever seen that used and was asking about appropriateness of that, with no criticism implied.

2ndkauboy Over a year ago

@lincolnk: Ah so then you would not recommend someone a IDE to someone as there is something like notepad? Giving someone a hint on how to make his programming in a new programming language easier is a bad idea? And flash has so much to do with selecting elements from the DOM. Please don't try to argue your downvote with such arguments.

Collectives™ on Stack Overflow

javascript: access elements within a table

4 Answers 4

1 Comment

2 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related