javascript：访问表中的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3037554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript: access elements within a table
提问by javier
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?
我对 javascript 很陌生。我有这个示例表。我希望能够获得“ http://www.msn.com”，但一直未能做到。我该怎么做？
thanx in advance
提前谢谢
j
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>
采纳答案by lincolnk
straight javascript is pretty easy.
直接的 javascript 非常简单。
grab a reference to a known element above the aelement higher up the tree
get a list of aelements under the known element
match the hrefproperty to the value you know
获取a对树上方元素上方已知元素的引用 获取已知a元素下方的元素列表将href属性与您知道的值相匹配
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 tableelement and then get a list of aelements from there, but if that's the only tablein tableContainerit's fine.
它会更好，如果你可以直接引用table元素，然后得到的名单a从那里的元素，但如果这是唯一的table在tableContainer它的罚款。
for checking the hrefproperty for a known value, i usually go with a case-insensitive regex but this should be fine for your case.
为了检查href属性的已知值，我通常使用不区分大小写的正则表达式，但这对您的情况应该没问题。
回答by Siddiq Baig
回答by Guffa
Using a framework like jQuery it's pretty simple:
使用像 jQuery 这样的框架非常简单：
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:
如果您不能简单地向元素添加 id 以使其更容易定位，则使用普通 Javascript 会更加复杂。例如，您可以浏览页面中的所有链接：
var href;
var links = document.links;
for (var i = 0; i < links.length; i++) {
if (links[i].title == 'Modificar') href = links[i].href;
}
回答by 2ndkauboy
If the structure is always like this, a code for Prototype would look like this:
如果结构总是这样，Prototype 的代码将如下所示：
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:
您还可以将 jQuery 与类似的选择器甚至纯 JS 一起使用，这将需要一些额外的选择。但是使用 id 属性（例如“msnLink”），您可以使用直接选择来获取它：
var msnLink = $('msnLink').href;
I can you extend the code with an ID?
我可以用 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?
你能给我们一些关于结构的更多信息，以及你在选择元素后想用它做什么吗？
