三行代码  ›  专栏  ›  技术社区  ›  kadina

如何使用javascript以网格格式(行和列)动态添加按钮?

  •  1
  • kadina  · 技术社区  · 4 年前

    我需要根据一台服务器的响应动态地将按钮显示在一行中(按钮之间的空间很小)。如果按钮穿过屏幕,则需要在下一行中显示按钮。我想用下表。

    <!DOCTYPE html>
    <html>
    
    <head>
      <style>
        td {
          width: 200px;
          height: 200px;
        }
        
        button {
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
    
    <body>
    
      <p>Table with cellspacing:</p>
      <table cellspacing="50">
        <tr>
          <td><button id='b1' onclick='clickbt("b2")'>Month</button></td>
          <td><button id='b2' onclick='clickbt("b3")'>Savings</button></td>
        </tr>
        <tr>
          <td><button id='b3' onclick='clickbt("b4")'>January</button></td>
          <td><button id='b4' onclick='clickbt("b1")'>$100</button></td>
        </tr>
      </table>
    
      <script>
        function clickbt(id) {
          document.getElementById(id).focus();
        }
      </script>
    </body>

    即使代码是在创建按钮,我还是将它硬编码为每行两个按钮,并将列硬编码为2。 但是,由于我需要根据服务器的响应动态地创建按钮,有没有使用JavaScript而不是HTML中的静态行和列的解决方案?

    2 回复  |  直到 4 年前
        1
  •  1
  •   Gerardo BLANCO    4 年前

    您可以使用JS和CSS来解决您的问题。

    使用JS,您可以创建和附加所需的任何数量的元素。 我做了一个小片段来嘲笑这个。风险价值 buttonsToGenerate 应该根据服务器的响应动态替换

    使用CSS,您可以使用flexbox布局来创建更动态、最重要、响应性更强的布局。

    希望这有帮助:)

    function generate(){
      let buttonsToGenerate = Math.floor(Math.random() * (3)) + 1;
      for(let i = 0; i < buttonsToGenerate; i++){
        var btn = document.createElement("button");        
        var t = document.createTextNode("button text");       
        btn.appendChild(t);                                
        document.getElementById('button-holder').appendChild(btn);                    
      }
    }
    p {
      display: inline;
    }
    
    p + button {
      width: auto;
      height: auto;
    }
    button {
        width: 200px;
        height: 200px;
    }
    
    #button-holder {
      display: flex;
      width: 100%;
      height: auto;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    <!DOCTYPE html>
    
    <body>
    
    <p>This will generate buttons between 1 - 5 per click:</p><button onclick="generate()">RUN</button> 
    <div id="button-holder"></div>
    <script>
    
    </script>
    </body>
        2
  •  1
  •   Saeed    4 年前

    这是为表创建动态按钮的示例。在本例中,您设置每行的按钮数和按钮数。

    var buttonNum = 10,
      w = window.innerWidth,
      rowButtonNumber = Math.floor(w / 200);
    
    var table = document.getElementById("myTable");
    
    for (var i = 0; i < buttonNum; i++) {
      var tr = document.createElement("tr");
      table.appendChild(tr);
      for (var j = 0; j < rowButtonNumber; j++, i++) {
        var td = document.createElement("td");
        var btn = document.createElement("button");
        btn.innerHTML = "btn " + (i + 1);
        btn.id = "btn-" + i;
        btn.onclick = function () { alert(this.innerHTML); };
        if (i >= buttonNum) {
          break;
        } else {
          td.appendChild(btn);
          tr.appendChild(td);
        }
      }
      i--;
    }
    <html>
    
    <head>
      <style>
        td {
          width: 200px;
          height: 200px;
        }
        
        button {
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
    
    <body>
    
      <p>Table with cellspacing:</p>
      <table id="myTable" cellspacing="50">
      </table>
    
      <script>
        function clickbt(id) {
          document.getElementById(id).focus();
        }
      </script>
    </body>