javascript - 通过单击按钮获取表格单元格的值

Question

我有 js 渲染的表格

<table class="table">
<thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">Город</th>
        <th scope="col">Регион</th>

    </tr>
</thead>
<tbody id="cities" style="overflow: auto;"></tbody>

这是代码

function GetCity() {
let citiesurl = '/cities/index';
$.ajax({
    url: citiesurl,
    contentType: 'application/json; charset=utf-8',
    type: 'GET',
    dataType: 'json',
    processData: false,
    success: function (data) {
        $("#cities").empty();
        var list = data;
        for (var i = 0; i <= list.length - 1; i++) {
            var tableData = '<tr>' + '<td>' +
                (i + 1) +
                '</td>' +
                '<td class="cityId" style="display:none">' +
                list[i].Id +
                '</td>' +
                '<td > ' +
                list[i].Name +
                '</td>' +
                '<td > ' +
                list[i].RegionName +
                '</td>' +
                    '<td> ' +
                    '<button type="button" class="btn btn-info" onclick="DeleteCity()">' + 'Удалить' + '</button>' +
                    '</td>' +
                '</tr>';
            $('#cities').append(tableData);
        }
    }
})

我尝试通过单击按钮获取 cityId 的值。

这是代码

 let id = $(this).closest('tr').find('.cityId').text();

但是提醒我，我什么也得不到。

我的错误在哪里？

Answer 1

问题是上下文 this 不是单击的按钮。

采用Event delegation动态创建元素的方法:

$('#cities').on('click', 'button.btn', function() {...}

$("#cities").empty();
var list = [{
  Id: 11,
  Name: "Name",
  RegionName: "RegionName"
}];

for (var i = 0; i <= list.length - 1; i++) {
  var tableData = '<tr>' + '<td>' +
    (i + 1) +
    '</td>' +
    '<td class="cityId" style="display:none">' +
    list[i].Id +
    '</td>' +
    '<td > ' +
    list[i].Name +
    '</td>' +
    '<td > ' +
    list[i].RegionName +
    '</td>' +
    '<td> ' +
    '<button type="button" class="btn btn-info">' + 'Удалить' + '</button>' +
    '</td>' +
    '</tr>';
  $('#cities').append(tableData);
}

$('#cities').on('click', 'button.btn', function() {
  let id = $(this).closest('tr').find('.cityId').text();
  console.log(id)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Город</th>
      <th scope="col">Регион</th>

    </tr>
  </thead>
  <tbody id="cities" style="overflow: auto;"></tbody>

更好的选择是使用 data-attributes

$("#cities").empty();
var list = [{
  Id: 11,
  Name: "Name",
  RegionName: "RegionName"
}];

for (var i = 0; i <= list.length - 1; i++) {
  var tableData = '<tr>' + '<td>' +
    (i + 1) +
    '</td>'  +
    '<td > ' +
    list[i].Name +
    '</td>' +
    '<td > ' +
    list[i].RegionName +
    '</td>' +
    '<td> ' +
    '<button data-city-id="'+list[i].Id+'" type="button" class="btn btn-info">' + 'Удалить' + '</button>' +
    '</td>' +
    '</tr>';
  $('#cities').append(tableData);
}

$('#cities').on('click', 'button.btn', function() {
  let id = $(this).data('city-id');
  console.log(id)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Город</th>
      <th scope="col">Регион</th>

    </tr>
  </thead>
  <tbody id="cities" style="overflow: auto;"></tbody>