CODEWITHSUNDEEP
javascript
javier
javier

Reputation: 23

javascript: access elements within a table

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>

Upvotes: 2

Views: 23294

Answers (4)

Siddiq Baig
Siddiq Baig

Reputation: 586

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

Upvotes: 0

lincolnk
lincolnk

Reputation: 11238

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.

Upvotes: 2

Guffa
Guffa

Reputation: 700152

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

Upvotes: 0

2ndkauboy
2ndkauboy

Reputation: 9377

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?

Upvotes: -1

Related Questions