Javascript Добавить кнопку со значением в html таблицу? - PullRequest
Новая
       5

Javascript Добавить кнопку со значением в html таблицу?

0 голосов
/ 08 июля 2020

Из двух массивов я создал таблицу HTML. Я пытаюсь добавить кнопку в каждую строку со значением.

Ссылка Jsfiddle 

var country = ["Norway", "Sweden", "Denmark"];
    var capital = ["Oslo", "Stockholm" , "Copenhagen"]

    var bodyString = '';
    $.each(country, function(index, ctry) {
        bodyString += ('<tr><td>'+ctry+'</td><td>'+capital[index]+'</td></tr>');
    });
    $('.countriesTable tbody').html(bodyString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <table class="countriesTable">
      <thead>
          <tr><th>Country</th><th>Capital</th>
      </thead>
      <tbody>
      
      </tbody>
  </table>
</body>
</html>

С этим массивом var button_value = ["1","2","3"]. Я пытаюсь добавить кнопку в каждую строку со значением из массива. Как действовать дальше?

Ответы [ 2 ]

2 голосов
/ 08 июля 2020

Подобно тому, как вы добавляли значения country и capital в таблицу, вы также можете добавить элемент button. 

var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm" , "Copenhagen"]
var button_value = ["1","2","3"]

    var bodyString = '';
    $.each(country, function(index, ctry) {
        bodyString += `<tr><td> ${ctry}</td><td> ${capital[index]}</td><td><button value="${button_value[index]}">${button_value[index]}</button> </tr>`;
    });
    $('.countriesTable tbody').html(bodyString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <table class="countriesTable">
      <thead>
          <tr><th>Country</th><th>Capital</th>
      </thead>
      <tbody>
      
      </tbody>
  </table>
</body>
</html>
1 голос
/ 08 июля 2020

Учтите следующее. 

var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm", "Copenhagen"];
var buttons = [{
  value: 59,
  label: "FiveNine"
}, {
  value: 65,
  label: "SixFive"
}, {
  value: 123,
  label: "OneTwoThree"
}];

$.each(country, function(i, c) {
  var row = $("<tr>").appendTo('.countriesTable tbody');
  $("<td>").html(country[i]).appendTo(row);
  $("<td>").html(capital[i]).appendTo(row);
  $("<td>").html($("<button>", {
    value: buttons[i].value
  }).html(buttons[i].label)).appendTo(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table class="countriesTable">
  <thead>
    <tr>
      <th>Country</th>
      <th>Capital</th>
      <th>&nbsp;</th>
  </thead>
  <tbody></tbody>
</table>

Ваша таблица должна будет учитывать дополнительные ячейки. Вы также можете использовать i отдельно, если это лучший идентификатор.

...