Question

我需要根据一台服务器的响应动态显示按钮（按钮之间的空间很小）。如果按钮穿过屏幕，则需要在下一行显示按钮。我想用下面的表格。

<!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中的静态行和列？

Answer 1

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

使用JS，您可以创建和附加所需的任何元素。我做了一个小片段来嘲笑这个。 var 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>

Answer 2

这是为表创建动态按钮的示例。在此示例中，您可以设置每行的按钮数和按钮数。

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>

如何使用javascript以网格格式（行和列）动态添加按钮？

2 个答案: