Home>
Assumptions

When placing a large number of buttons, instead of manually setting the buttons one by one
For example, I want to create a program that can automatically place buttons by setting vertical X x horizontal Y.

Applicable source code
<input type = "checkbox" name = "c []" value = "A-1"><input type = "button" value = "A- 1 ">
<input type = "checkbox" name = "c []" value = "A-2"><input type = "button" value = "A-2">
<input type = "checkbox" name = "c []" value = "A-3"><input type = "button" value = "A-3">
<input type = "checkbox" name = "c []" value = "A-4"><input type = "button" value = "A-4">
<input type = "checkbox" name = "c []" value = "A-5"><input type = "button" value = "A-5"><br>
<input type = "checkbox" name = "c []" value = "B-1"><input type = "button" value = "B-1">
<input type = "checkbox" name = "c []" value = "B-2"><input type = "button" value = "B-2">
<input type = "checkbox" name = "c []" value = "B-3"><input type = "button" value = "B-3">
<input type = "checkbox" name = "c []" value = "B-4"><input type = "button" value = "B-4">
<input type = "checkbox" name = "c []" value = "B-5"><input type = "button" value = "B-5"><br>
<input type = "checkbox" name = "c []" value = "C-1"><input type = "button" value = "C-1">
<input type = "checkbox" name = "c []" value = "C-2"><input type = "button" value = "C-2">
<input type = "checkbox" name = "c []" value = "C-3"><input type = "button" value = "C-3">
<input type = "checkbox" name = "c []" value = "C-4"><input type = "button" value = "C-4">
<input type = "checkbox" name = "c []" value = "C-5"><input type = "button" value = "C-5"><br>
Background

As a background that I wanted to create, I am creating a seat reservation form with the current button as a seat, and I want to make specifications so that this side can easily change the seat arrangement according to the venue. The So, instead of placing one seat at a time, I want to create a program that can be changed in a batch.

In the above case, 15 check boxes and buttons are arranged in 3 x 5 rows.
What I want to realize is that I want to save time and effort to enter this program every time I place a button.

I'd like to know if there is a way to arrange buttons easily and regularly.

  • Answer # 1

    An answer with a minimum sample code as a hint.
    The concept is simple, but with for you put a horizontal loop in the vertical loop and wrap it at the end of the horizontal loop.

    <? php
    $x = 5;
    $y = 3;
    $html = "";
    for ($yi = 1;$yi<= $y;$yi ++) {
      for ($xi = 1;$xi<= $x;$xi ++) {
        $html. = $yi. "-". $xi. "@";
      }
      $html. = "<br />\ n";
    }
    echo $html;

    Output result:

    1-1 @ 1-2 @ 1-3 @ 1-4 @ 1-5 @<br />
    2-1 @ 2-2 @ 2-3 @ 2-4 @ 2-5 @<br />
    3-1 @ 3-2 @ 3-3 @ 3-4 @ 3-5 @<br />

    It looks like the vertical is A, B, C, so it is good to prepare functions that convert 1 ~ to A ~ and convert $yi to each argument.

    While written in PHP this time, JavaScript can be implemented in the same logic.

    As a precaution, if you want to arrange it neatly, you need to put it as it is and adjust it by properly applying CSS to the html tag to align instead of<br /> ;.

  • Answer # 2

    If you just want to spit out HTML examples in PHP

    foreach (range ("A", "C") as $r) {
      foreach (range (1,5) as $c) {
        print "<input type = 'checkbox' name = 'c []' id = 'c {$r}-{$c}' value = '{$r}-{$c}'><input type = 'button' value = '{$r}-{$c}' class = 'cx'>";
      }
      print "<br>";
    }