Question

使用jQuery，当以编程方式生成表格单元格时，如何使用AJAX调用填充表格单元格的值？

我正在构建一个如下工作的页面：

执行初始AJAX调用，期待一个JSON数组，例如项目名称列表
AJAX回调使用jQuery.each迭代数组
每个数组项的回调都会向表中添加一行，项目名称为
还有其他单元格（假设它们代表项目位置）但要获得此值，需要进行另一次AJAX调用（在示例中标记为*） - 我该如何实现这个功能？

示例表结构：

Name       Location1  Location2
================================
Item1          *          *
Item2          *          *

其他考虑因素：

需要满足动态数量的列，即位置。这就是我
我知道有很多电话，但不关心这个问题
我正在使用DataTables插件
我想了解这是否确实可以在不更改Web服务后端来生成整个表，或者一次至少一行的情况下完成。通过执行每个单元的查询，我可以重用现有的调用。

注意：我正在使用以下代码添加表行，我将对此进行更改。 Reference

$("#tableID").find("tbody").append($('<tr>')
    .append($('<td>').text(...))
    .append($('<td>').text(...))
    .append($('<td>').text(...))
);

我想我可能会为每个单元格生成ID，然后根据它启动AJAX调用，但这看起来有点笨重。还有更优雅的方法吗？

理想情况下，也可以调整任何解决方案以处理向表中添加额外列的用例，例如：上面样本表中的Location3。

Answer 1

var nEditing = null;
 $('#query_for_search_result_table_new').click(function (e) {
            e.preventDefault();
            var aiNew = oTable.fnAddData(['', '', '', '<a class="edit" href="">Edit</a>', '<a class="cancel" data-mode="new" href="">Cancel</a>', '']);
            var nRow = oTable.fnGetNodes(aiNew[0]);
            editRow(oTable, nRow);
            nEditing = nRow;
        });

function editRow(oTable, nRow) {

            var aData = oTable.fnGetData(nRow);
            var jqTds = $('>td', nRow);
            jqTds[0].innerHTML = $("#dvFieldLabel").html();
            jqTds[1].innerHTML = $("#dvFieldOperator").html();
            jqTds[2].innerHTML = '<input type="text" class="m-wrap small" value="' + aData[2] + '">';
            jqTds[3].innerHTML = '<a class="edit" href="">Save</a> &nbsp; <a data-mode="new" class="cancel" href="">Cancel</a>';
            jqTds[4].innerHTML = '<label>' + aData[0] + ' ' + aData[1] + ' ' + aData[2] + '</label>';



        }

jQuery - 使用AJAX调用的值动态添加表格单元格

1 个答案: