在一列详细信息 DataTables 行中嵌入超链接

Question

这是SO Question的后续问题

从接受的响应中，我能够让表格工作，如下面的 JS Fiddle 所示

`var data = {"data":[{"student_name":"jack","subjects":{"math":{"cat1_grade":"30","cat2_grade":"39","cat3_grade":"38"},"english":{"cat1_grade":"30","cat2_grade":"39","cat3_grade":"38"},"swahili":{"cat1_grade":"30","cat2_grade":"39","cat3_grade":"38"}},"subject1_average":"35","subject2_average":"26","subject3_average":"59"}]};

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    var header = false;
    var detail_table = $("<table></table>",{
        "cellpadding":"5",
        "cellspacing": "0",
        "border": "0",
        "style":"padding-left:50px;"
    });
    var tbody = $("<tbody></tbody>");
    detail_table.append(tbody);
    $.each(d.subjects, function(k, v){
        var tbody_row = $("<tr></tr>").append($("<td></td>",{"text": k}));
        if(!header){
            var thead = $("<thead></thead>");
            var thead_row = $("<tr></tr>")
            thead_row.append($("<th></th>",{"text":" "}));
            $.each(v, function(a, b){
                thead_row.append($("<th></th>",{"text":a}));
                tbody_row.append($("<td></td>",{"text":b}));
            });
            thead.append(thead_row);
            detail_table.append(thead);          
            header = true;
        }else{
            $.each(v, function(a, b){
                tbody_row.append($("<td></td>",{"text":b}));
            });
        }
        tbody.append(tbody_row);     
    });
    return detail_table;
}

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": {
            "url": '/echo/js/?js=' + encodeURIComponent(JSON.stringify(data)),
        },
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "student_name" },
            { "data": "subject1_average" },
            { "data": "subject2_average" },
            { "data": "subject3_average" }
        ],
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );

JS Fiddle Link

但是，我真的很想将其中一个详细信息列设为超链接。所以具体来说，我如何让学生的数学列成为一个超链接，以便当用户点击数学时，他们会被导航到 math.html 链接，例如“http://math.com”。

说清楚我相信

$.each(v, function(a, b){
                tbody_row.append($("<td></td>",{"text":b}));
            });

是创建行的部分，我希望该行的元素 X 成为超链接，而所有其他元素都可以是文本。 我不太了解javascript，所以我认为{"text":b} 正在将元素作为文本添加到行中。但我不知道如何将对象 v 的元素 X 指定为 URL，同时将 v 的其余元素保留为文本

Answer 1

变化：

var tbody_row = $("<tr></tr>").append($("<td></td>",{"text": k}));

到

var tbody_row = $("<tr></tr>").append($("<td></td>",{"html": '<a href="' + k + '.html">' + k + '</a>'}));

在主题为math 时构造指向math.html 的链接。

有关代码和演示，请参阅updated jsFiddle。