以编程方式将一些 td 附加到 tr - jQuery AJAX JSON答案

【问题标题】：Programmatically append some td to tr - jQuery AJAX JSON以编程方式将一些 td 附加到 tr - jQuery AJAX JSON
【发布时间】：2017-06-21 17:54:44
【问题描述】：

我一直在寻找某种方法来使用 jQuery 将 td 附加到 tr 到表中，而对我的 json 响应一无所知，此时我已经达到了这一点：

function getClientes(){
    $.ajax({
    url:URL_BASE+"Cliente",
    type:"GET",
    beforeSend: function (xhr) {
        xhr.setRequestHeader ("Authorization", "Basic " + btoa("hola" + ":" + "hola"));
    },
    success: function (data){
            $.each(data,function(index,value){
                $('<tr>').append(
                    $.each(value,function(value,celda)
                    {
                        $('<td>').text(celda);
                    })                      
            ).appendTo('#table');
            })
        }
    });     
}

问题是我的 .html 输出是这样的：

<table id="table" class="table table-condensed">
   <tr></tr>
   <tr></tr>
</table>

所以这不是将 td 附加到 tr，我不想手动附加它们我知道这样做很容易，但这对我来说更好，请帮助：D

【问题讨论】：

return $('<td>').text(celda);?
在每个内部附加一个没有意义。 each 不返回任何东西。如果您映射并返回一组元素，那将是有意义的。

标签： javascript jquery html json ajax

【解决方案1】：

用这个替换你的代码::

function getClientes(){
    $.ajax({
    url:URL_BASE+"Cliente",
    type:"GET",
    beforeSend: function (xhr) {
        xhr.setRequestHeader ("Authorization", "Basic " + btoa("hola" + ":" + "hola"));
    },
    success: function (data){
            $.each(data,function(index,value){
                $('tr').append(
                    $.each(value,function(value,celda)
                    {
                        $('td').text(celda);
                    })                      
            ).appendTo('#table');
            })
        }
    });     
}

我认为它会起作用。

【讨论】：

这只会改变 tr 不会出现。

【解决方案2】：

我想你需要像下面这样附加你的数据，首先创建一个表格行，然后使用选择器$('tr:last')附加到最后一个表格行

var data = [["hello", "A"], ["hiii", "B"], ["hey", "C"]]


 $.each(data,function(index,value){
              $("#table").append('<tr></tr>') 
                     $.each(value,function(value,celda)
                    {
                       $('tr:last').append('<td>' + celda + '</td>');
                    })                   
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" class="table table-condensed">
</table>

【讨论】：

【解决方案3】：

看到这支笔：http://codepen.io/rarmatei/pen/XpYWNL

我使用了数组“map”操作符而不是 jQuery 的 $.each。

在您的函数中，当您在每个 $.each() 交互中执行 $('<td>').text(celda); 时，VM 只执行此指令，而不存储/返回要添加到最终生成的 HTML 元素集的结果。

所以你的函数可能如下所示：

function getClientes() {
  $.ajax({
    url: URL_BASE + "Cliente",
    type: "GET",
    beforeSend: function(xhr) {
      xhr.setRequestHeader("Authorization", "Basic " + btoa("hola" + ":" + "hola"));
    },
    success: function(data) {
      data.map(value => {
        var elements = value.map(subValue => {
          return $('<td>').text(subValue);
        });
        return $('<tr>').append(elements);
      }).appendTo('#table');
    }
  })
}

【讨论】：

【解决方案4】：

最后我创建了一行并在每个循环中手动附加，不是最好的答案，但它对我有用，谢谢你的所有答案：D

function getClientes(){
$.ajax({
url:URL_BASE+"Cliente",
type:"GET",
beforeSend: function (xhr) {
    xhr.setRequestHeader ("Authorization", "Basic " + btoa("hola" + ":" + "hola"));
},
success: function (data){
        $.each(data,function(index,value){
        var row = $("<tr/>");                

                $.each(value,function(value,celda)
                {
                   row.append($('<td>').text(celda));
                });                      
        $('#table').append(row);
        })
    }
});     
}

【讨论】：