Как добавить кнопки динамически в формате сетки (строки и столбцы) с помощью JavaScript? - PullRequest
Новая
       0

Как добавить кнопки динамически в формате сетки (строки и столбцы) с помощью JavaScript?

0 голосов
/ 23 мая 2018

Мне нужно отображать кнопки динамически подряд (с небольшим промежутком между кнопками) в зависимости от ответа от одного сервера.Если кнопки пересекают экран, необходимо отобразить кнопки в следующем ряду.Я думал об использовании таблицы, как показано ниже. 

<!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 ]

0 голосов
/ 23 мая 2018

Это пример создания динамических кнопок для таблицы.В этом примере вы устанавливаете количество кнопок и количество кнопок в каждой строке. 

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>
0 голосов
/ 23 мая 2018

Вы можете использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...