将超链接嵌入到详细信息DataTables行的一列中

这是来自SO问题的追随者

从接受的响应中，我能够使表正常工作，如下面的JS小提琴所示。

`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小提琴链接

但是，我真的很想让details列之一成为超链接。因此，具体来说，我将如何使学生的数学列成为超链接，以便在用户单击数学时将其导航至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的其余元素保留为文本