按部分姓名或ID获取元素 [英] Get element by part of Name or ID

问题描述

 < p> form name =inputformaction =...method =post> 
< input type =hiddenname =id_qtedje_77id =id_qtedje_77value =0> 
< input type =textid =id_qte_77name =prestation_detail_fields [77] [qte_collecte]value =0.00> 
< input type =textid =id_rec_77name =prestation_detail_fields [77] [reliquat_conforme]value =0.00> 
< input type =textid =id_ren_77name =prestation_detail_fields [77] [reliquat_non_conforme]value =0.00> 
< input type =checkboxname =prestation_detail_fields [77] [dechet_non_present]value =1> 
 
<！ - 另一个TR  - > 
 
< input type =hiddenname =id_qtedje_108id =id_qtedje_108value =0> 
< input type =textid =id_qte_108name =prestation_detail_fields [108] [qte_collecte]value =0.00> 
< input type =textid =id_rec_108name =prestation_detail_fields [108] [reliquat_conforme]value =0.00> 
< input type =textid =id_ren_108name =prestation_detail_fields [108] [reliquat_non_conforme]value =0.00> 
< input type =checkboxname =prestation_detail_fields [108] [dechet_non_present]value =1> 
< / form> 
  

我想要的是获取输入的值，但由于表单是用PHP构建的，所以我不会不知道行标识符（77,108）。

有没有办法像 getElementByName（'id_qtedje _％'）？

注意：我没有使用任何库，我也不打算使用它。

解决方案

你最好的选择可能是 document.querySelectorAll ，您可以使用任何CSS选择器，包括属性以选择器开始，如 input [id ^ =id_qtedje _] 。 支持所有现代浏览器和IE8 ：

  var elements = document.querySelectorAll（'input [id ^ =id_qtedje_]'）; 
  

如果您只需要第一次匹配（而不是列表），则可以使用 document.querySelector 来代替。如果没有匹配，它会返回对文档顺序中第一个匹配的引用，或者返回 null 。

另外，你也可以给元素一个类名，然后使用 document.getElementsByClassName ，但请注意，虽然旧版本的Chrome和Firefox支持 getElementsByClassName ，但IE8没有它，所以它是不如现在时代更实用的 querySelectorAll 支持得更好。

  var elements = document.getElementsByClassName（theClassName）; 
  

如果您使用任何库（jQuery，MooTools，Closure，Prototype等），它们很可能有一个函数可以用来通过任何CSS选择器来查找元素，从而填补浏览器支持方面的空白和自己的代码。例如，在jQuery中，它是 $ （ jQuery ）函数;在MooTools和Prototype中，它是 $$ 。

Here is an example of my form (only inputs that I want, but there is many others):

<form name="inputform" action="..." method="post">
<input type="hidden" name="id_qtedje_77" id="id_qtedje_77" value="0">
<input type="text" id="id_qte_77" name="prestation_detail_fields[77][qte_collecte]" value="0.00">
<input type="text" id="id_rec_77" name="prestation_detail_fields[77][reliquat_conforme]" value="0.00">
<input type="text" id="id_ren_77" name="prestation_detail_fields[77][reliquat_non_conforme]" value="0.00">
<input type="checkbox" name="prestation_detail_fields[77][dechet_non_present]" value="1">

<!-- another TR -->

<input type="hidden" name="id_qtedje_108" id="id_qtedje_108" value="0">
<input type="text" id="id_qte_108" name="prestation_detail_fields[108][qte_collecte]" value="0.00">
<input type="text" id="id_rec_108" name="prestation_detail_fields[108][reliquat_conforme]" value="0.00">
<input type="text" id="id_ren_108" name="prestation_detail_fields[108][reliquat_non_conforme]" value="0.00">
<input type="checkbox" name="prestation_detail_fields[108][dechet_non_present]" value="1">
</form>

What I want is to get values of inputs, but as the form is built in PHP, I don't know the line identifier (77, 108).

Is there a way to do something like getElementByName('id_qtedje_%') ?

Note: I'm not using any library, and I don't plan to use one.

解决方案

Your best bet is probably document.querySelectorAll, which you can use any CSS selector with, including an "attribute starts with" selector like input[id^="id_qtedje_"]. It's supported on all modern browsers, and also IE8:

var elements = document.querySelectorAll('input[id^="id_qtedje_"]');

If you wanted just the first match (rather than a list), you could use document.querySelector instead. It returns a reference to the first match in document order, or null if nothing matched.

Alternately, you could give the elements a class name, then use document.getElementsByClassName, but note that while getElementsByClassName was supported in old versions of Chrome and Firefox, IE8 doesn't have it, so it's not as well-supported as the more-useful querySelectorAll in the modern era.

var elements = document.getElementsByClassName("theClassName");

If you use any libraries (jQuery, MooTools, Closure, Prototype, etc.), they're likely to have a function you can use to look up elements by just about any CSS selector, filling the gaps in browser support with their own code. For instance, in jQuery, it's the $ (jQuery) function; in MooTools and Prototype, it's $$.

这篇关于按部分姓名或ID获取元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！