JavaScript如何读取无元素名JSON文件的指定数据（Datatables场景）

错误原因 #

你当前写法的问题是数组取值语法错误：JavaScript中访问数组元素直接用变量[下标]即可，不需要在变量和中括号之间加额外的.，data.[6]属于非法语法，自然无法读取到对应值。
另外你返回的价格字段末尾自带\n换行符，取值后可以用trim()方法去除多余空白，展示效果更干净。

修正后的代码 #

1. 调整format函数 #

function format ( data ) {
    // 直接用[下标]读取数组元素，trim清除价格末尾的换行符
    const targetPrice = data[6].trim();
    const targetCode = data[11];
    
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+ 
            '<td>Full name:</td>'+
            '<td>'+targetPrice+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+targetCode+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

2. 确认详情展开事件绑定 #

如果你还没绑定行展开的点击事件，需要在Datatables初始化代码后添加这段逻辑，才能触发format函数渲染详情内容：

$('#escanmotorList tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = employeeData.row( tr );
 
    if ( row.child.isShown() ) {
        // 已展开则收起
        row.child.hide();
        tr.removeClass('shown');
    } else {
        // 未展开则调用format渲染详情
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
});

调试建议 #

如果后续出现下标对应不上的问题，可在format函数第一行添加console.log(data)，打开浏览器开发者工具的控制台，即可看到每一行的完整数组结构，确认目标值对应的下标即可。

内容的提问来源于stack exchange，提问作者Camilo。