Question

我有模态表

这里是html代码

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

我从后端获取数据并在js中生成表格像这样

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" id="">' + 'Подтвердить' + '</button>' +
                    '</td>' +
                '</tr>';
            $('#cities').append(tableData);
        }
    }
})

}

但是所有渲染都很棒，而不是按钮。

控制台中的任何错误。哪里可以出错？

Answer 1

您的表标题存在问题。您没有为区域名称和按钮添加标题。

尝试下面的标题行代码

<tr>
        <th scope="col">#</th>
        <th scope="col">Город</th>
        <th scope="col">Регион</th>
        <th scope="col">Region Name</th>
        <th scope="col">Button</th>
    </tr>

并关闭表标签

Answer 2

为什么您只是简单地使用Template Strings模板字符串包含在back-tick (``)中用下面的代码替换你的代码

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 id="">Подтвердить</button>
        </td>
      </tr>`;

      $('#cities').append(tableData)
    }
}
})
}

这会起作用点击This Link了解有关模板字符串的更多信息

表无法正确呈现

2 个答案: