Question

如何获取所有input标记名称然后获取其ID并在每个输入标记中添加一些文本？

例如输入为：

var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
}

<input type="hidden" name="name" id="name">
<input type="hidden" name="address" id="address">
<input type="hidden" name="age" id="age">
<input type="hidden" name="sex" id="sex">

然后我想打印/ console.log：

data.name
data.address
data.age
data.sex

在该输出中，我想添加文本“data”。并插入id。我该怎么做？使用eval（）是否有效？感谢

Answer 1

通过jQuery，你可以像下面这样做： -

$(document).ready(function(){
  $('input[type="hidden"]').each(function(){ // or $('input').each(function(){
     console.log("data."+$(this).attr('id')); //get id of each input
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="name" id="name">
<input type="hidden" name="address" id="address">
<input type="hidden" name="age" id="age">
<input type="hidden" name="sex" id="sex">

注意： - 需要在script代码之前添加jQuery库。谢谢

Answer 2

您可以将输入名称命名为：

var dummyName = inputs[index].name; //or create array if required

然后使用此dummyName读取任何数据：

data[dummyName];

如果需要更多信息，将更改答案。

Answer 3

＆＃13;

var inputs, index;

var inoutnames = $("input").map(function(){

return "data."+$(this).attr('name')
}).get();

console.log(inoutnames)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="name" id="name">
<input type="hidden" name="address" id="address">
<input type="hidden" name="age" id="age">
<input type="hidden" name="sex" id="sex">

＆＃13;

使用.map()
返回输入属性名称加上＆＃34;数据＆＃34;

Answer 4

使用纯Javascript，循环输入并将它们存储在对象中。

＆＃13;

var inputs, index;
var data = {};
inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; index++) {
     data[inputs[index].id] =  inputs[index].value; 
}

console.log(data);

＆＃13;

<input type="hidden" name="name" id="name">
<input type="hidden" name="address" id="address">
<input type="hidden" name="age" id="age">
<input type="hidden" name="sex" id="sex">

＆＃13;

Answer 5

var inputs, index;
var result=""
inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
  result+= "Name:" + inputs[index].name + ' ' +"Id:"+ inputs[index].id + "<br>";
}
document.getElementById('demo').innerHTML=result

<input type="hidden" name="name" id="name">
<input type="hidden" name="address" id="address">
<input type="hidden" name="age" id="age">
<input type="hidden" name="sex" id="sex">

<div id="demo">

</div>

Answer 6

Array#reduce可用于获取所有输入字段的对象。

reduce()方法对累加器和数组中的每个元素（从左到右）应用函数以将其减少为单个值。

＆＃13;

var obj = [].slice.call(document.querySelectorAll('input')).reduce(function(a, b) {
  a[b.id] = b.value;
  return a;
}, {});
console.log(obj);

＆＃13;

<input type="hidden" name="name" id="name" value="Rayon">
<input type="hidden" name="address" id="address" value="India">
<input type="hidden" name="age" id="age" value="27">
<input type="hidden" name="sex" id="sex" value="M">

＆＃13;

如何获取所有输入标记名称然后获取其ID并在每个输入中添加一些文本？

6 个答案: