Question

我在页面上有一堆按钮，具体来说，我有10行和5列，所以第一行我有5个按钮，A1，B1，C1，D1，E1 ......，第二行我有A2， B2，C2，D2，E2，..一直到第10行，A0，B0，C0，D0，E0。当我提交时，这些按钮中的每一个都应该具有值A1，A2，A3等。无论如何我可以快速做到这一点，目前我有一个javascript getElementById来获取每个按钮，但这太长了。想象一下，如果我必须包含更多按钮。有没有什么方法可以循环这些按钮，每个按钮都有不同的值，并提出不同的值。我想过使用getElementsByClass，但这样我无论如何都不会知道每个元素的索引。任何人都有更聪明和程序化的方法来解决这个问题？感谢。

Answer 1

您可以使用脚本语言。 这是样本逻辑： IN PHP （使用for循环）：

<?php 
  $letter='A';
  for($j=0; $j < 10; $j++) {
   for ($i = 0; $i < 5; $i++) {    
     if($i==0)
         $letter = 'A';
     else if($i==1)
         $letter = 'B';
     else if($i==2)
         $letter = 'C';
     else if($i==3)
         $letter = 'D';
     else if($i==4)
         $letter = 'E';
     else
         $letter = 'Z';               
?>
<input type = "button" id="<?php echo $letter . $j?>" value="<?php echo $letter . $j?>">
<?php } echo "<br />"; } ?>

如果在＆lt;中写入，则会产生以下输出：身体＆gt;标记：

<html>
<body>
                <input type = "button" id="A0" value="A0">
                <input type = "button" id="B0" value="B0">
                <input type = "button" id="C0" value="C0">
                <input type = "button" id="D0" value="D0">
                <input type = "button" id="E0" value="E0">
        <br />        <input type = "button" id="A1" value="A1">
                <input type = "button" id="B1" value="B1">
                <input type = "button" id="C1" value="C1">
                <input type = "button" id="D1" value="D1">
                <input type = "button" id="E1" value="E1">
        <br />        <input type = "button" id="A2" value="A2">
                <input type = "button" id="B2" value="B2">
                <input type = "button" id="C2" value="C2">
                <input type = "button" id="D2" value="D2">
                <input type = "button" id="E2" value="E2">
        <br />        <input type = "button" id="A3" value="A3">
                <input type = "button" id="B3" value="B3">
                <input type = "button" id="C3" value="C3">
                <input type = "button" id="D3" value="D3">
                <input type = "button" id="E3" value="E3">
        <br />        <input type = "button" id="A4" value="A4">
                <input type = "button" id="B4" value="B4">
                <input type = "button" id="C4" value="C4">
                <input type = "button" id="D4" value="D4">
                <input type = "button" id="E4" value="E4">
        <br />        <input type = "button" id="A5" value="A5">
                <input type = "button" id="B5" value="B5">
                <input type = "button" id="C5" value="C5">
                <input type = "button" id="D5" value="D5">
                <input type = "button" id="E5" value="E5">
        <br />        <input type = "button" id="A6" value="A6">
                <input type = "button" id="B6" value="B6">
                <input type = "button" id="C6" value="C6">
                <input type = "button" id="D6" value="D6">
                <input type = "button" id="E6" value="E6">
        <br />        <input type = "button" id="A7" value="A7">
                <input type = "button" id="B7" value="B7">
                <input type = "button" id="C7" value="C7">
                <input type = "button" id="D7" value="D7">
                <input type = "button" id="E7" value="E7">
        <br />        <input type = "button" id="A8" value="A8">
                <input type = "button" id="B8" value="B8">
                <input type = "button" id="C8" value="C8">
                <input type = "button" id="D8" value="D8">
                <input type = "button" id="E8" value="E8">
        <br />        <input type = "button" id="A9" value="A9">
                <input type = "button" id="B9" value="B9">
                <input type = "button" id="C9" value="C9">
                <input type = "button" id="D9" value="D9">
                <input type = "button" id="E9" value="E9">
        <br /></body>
</html>

您可以在其他脚本语言中应用相同的逻辑

Answer 2

你可以尝试forEach，for，while，do while等等。

编辑：

您可以使用每个jquery。例如：

$('input[type=button]').each(function(i,e){
  $(this).val(whatever);
});

Answer 3

试试这个：

在jQuery中：

$.each ( collection, function ( key, value ) {

            console.log (key + " " + value);                            
});

each()

在JavaScript中：

  array.forEach(callback[, thisObject]);

forEach()

Answer 4

如果A1为id = a1，则B1为id = b1，...

我希望这可以帮到你

ReflectUtil

Answer 5

＆＃13;

const alpha = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];

const frag = document.createDocumentFragment();

const form = document.getElementById('form');
const alphaInput = document.getElementById('alpha-input');

for (let i = 0; i < alpha.length; i++) {
  let div = document.createElement('div');

  for (let j = 0; j < 5; j++) {
    let input = document.createElement('input');

    input.type = 'button';
    input.value = i === 9 ? `${alpha[i]}0` : `${alpha[i]}${j + 1}`;

    input.addEventListener('click', () => {
      alphaInput.value = input.value;
    });

    div.appendChild(input);
  }

  frag.appendChild(div);
}

document.getElementById('button-container').appendChild(frag);

form.addEventListener('submit', (e) => {
  e.preventDefault();

  if (alphaInput.value) {
    console.log(`${alphaInput.value} was submitted`);
  } else {
    console.log('No button was clicked before you submitted this form');
  }

  alphaInput.value = '';
});

＆＃13;

<form id="form">
  <div id="button-container"></div>
  <input type="hidden" id="alpha-input" />
  <input type="submit" />
</form>

＆＃13;

javascript每个提交不同值的按钮集合

5 个答案: