I'm pretty new to javascript. I have this sample table. I want to be able to get the "" 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="" 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>
I'm pretty new to javascript. I have this sample table. I want to be able to get the "http://www.msn." 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." 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>
4 Answers
Reset to default 2straight 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.') {
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.
Using a framework like jQuery it's pretty simple:
var href = $('#tableContainer .iconos a[title=Modificar]').attr('href');
Using plain Javascript it's more plicated 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;
}
you can also do this by using jQuery
$('#tableContainer a').each(function() {
if (this.href == 'http://www.msn.'){
// Do something like $(this).hide();
}
else {
// Do somthing like $(this).show();
}
});
here is an example of JSFiddle
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?