logo标签列表

使用jQuery从二维数组创建表格

javascriptjqueryhtml-table
4
我可以帮您翻译成中文。这段内容涉及到IT技术，您想创建一个带有从JSON中的二维数组的值的表格。下面是我做出的代码:

数据

 var data = {"ver[
    {"0":"1","id_pemasang":"1","1":"1","id_jenis_pemasang":"1","2":null,"npwp":null,"3":"Yos Sudarso","nama":"Yos Sudarso","4":"Perumahan Griya Perwita No.10","alamat":"Perumahan Griya Perwita No.10","5":"Yogyakarta","kota":"Yogyakarta","6":"0274-541056","telepon":"0274-541056","7":"08134570378","handphone":"08134570378","8":"0","diskon":"0"},
    {"0":"2","id_pemasang":"2","1":"2","id_jenis_pemasang":"2","2":"34.081.203.1-342.000","npwp":"34.081.203.1-342.000","3":"CV. Prima Agung","nama":"CV. Prima Agung","4":"Jl. Cenderawasih No.72 Warungboto","alamat":"Jl. Cenderawasih No.72 Warungboto","5":"Yogyakarta","kota":"Yogyakarta","6":"0274-878906","telepon":"0274-878906","7":null,"handphone":null,"8":"5","diskon":"5"},
    {"0":"3","id_pemasang":"3","1":"2","id_jenis_pemasang":"2","2":null,"npwp":null,"3":"PT. Tampil Jaya","nama":"PT. Tampil Jaya","4":"Jl. Alamanda No.3","alamat":"Jl. Alamanda No.3","5":"Yogyakarta","kota":"Yogyakarta","6":"0274-552233","telepon":"0274-552233","7":null,"handphone":null,"8":"20","diskon":"20"}
 ]};

html

<table class="table table-striped table-bordered table-data-omset">
     <tbody></tbody>
</table>

jQuery

var tableOmset = $('table.table-data-omset');
var tbodyTableOmset = tableOmset.find('tbody');
var rowTbodyTableOmset = '<tr></tr>';

for(var a=0; a<data.ver.length; a++){
    tbodyTableOmset.append(rowTbodyTableOmset);                       
    for(var b=0; b<5; b++){
        if(data.ver[a][b] == null){
             data.ver[a][b]= '';
        }
        tbodyTableOmset.find('tr').append('<td>'+data.ver[a][b]+'</td>');
     }
 }

但是在我执行或运行之后，结果显示成功，但看起来并不好。以下是结果图像： enter image description here 希望您能帮助我解决这个问题。
而问号是什么？顺便说一下，你的“数据”是勘误http://jsonlint.com/ - Roko C. Buljan
你的 JSON 格式无效。顺便说一下。 - bipen
@bipen：不，我的 JSON 是有效的，请再检查一遍。 - ramadani
哈哈哈..很抱歉要这么说..但是又是无效的...你忘记了 : ..我本可以编辑它...但不确定那是否是笔误或者就是你想要的..如果那就是你想要的，那问题就在于 JSON 而不是 jQuery.. :) - bipen
https://dev59.com/ZXNA5IYBdhLWcg3wNa-T - Ejaz
2个回答
1
在你的for循环中，使用trTableOmset +=字符串创建表格元素。然后使用tbodyTableOmset.append(trTableOmset);即可完成！
应该看起来像这样：

演示页面

注意：保留HTML标签。
var tableOmset = $('table.table-data-omset');
var tbodyTableOmset = tableOmset.find('tbody');
var trTableOmset = '';
for(var a=0; a<data.ver.length; a++){
    trTableOmset += '<tr>'  ;                    
    for(var b=0; b<18; b++){          // 5 or 18 ?
        if(data.ver[a][b] === null){
             data.ver[a][b]= '';
        }
        trTableOmset += '<td>'+ data.ver[a][b] +'</td>';
     }
    trTableOmset += '</tr>' ;
 }
tbodyTableOmset.append(trTableOmset);

固定数据：

var data = {
    "ver": [
        {
            "0": "1",
            "id_pemasang": "1",
            "1": "1",
            "id_jenis_pemasang": "1",
            "2": null,
            "npwp": null,
            "3": "YosSudarso",
            "nama": "YosSudarso",
            "4": "PerumahanGriyaPerwitaNo.10",
            "alamat": "PerumahanGriyaPerwitaNo.10",
            "5": "Yogyakarta",
            "kota": "Yogyakarta",
            "6": "0274-541056",
            "telepon": "0274-541056",
            "7": "08134570378",
            "handphone": "08134570378",
            "8": "0",
            "diskon": "0"
        },
        {
            "0": "2",
            "id_pemasang": "2",
            "1": "2",
            "id_jenis_pemasang": "2",
            "2": "34.081.203.1-342.000",
            "npwp": "34.081.203.1-342.000",
            "3": "CV.PrimaAgung",
            "nama": "CV.PrimaAgung",
            "4": "Jl.CenderawasihNo.72Warungboto",
            "alamat": "Jl.CenderawasihNo.72Warungboto",
            "5": "Yogyakarta",
            "kota": "Yogyakarta",
            "6": "0274-878906",
            "telepon": "0274-878906",
            "7": null,
            "handphone": null,
            "8": "5",
            "diskon": "5"
        },
        {
            "0": "3",
            "id_pemasang": "3",
            "1": "2",
            "id_jenis_pemasang": "2",
            "2": null,
            "npwp": null,
            "3": "PT.TampilJaya",
            "nama": "PT.TampilJaya",
            "4": "Jl.AlamandaNo.3",
            "alamat": "Jl.AlamandaNo.3",
            "5": "Yogyakarta",
            "kota": "Yogyakarta",
            "6": "0274-552233",
            "telepon": "0274-552233",
            "7": null,
            "handphone": null,
            "8": "20",
            "diskon": "20"
        }
    ]
};
是的，你的答案完全正确。我忘记了 += 可以帮助这个问题。非常感谢大家 :) - ramadani
1

示例

JS

function ToTable(dataArray)
{
    html = '<table>'; 
    var len = dataArray.length;
    for(var i = 0; i < len; i++){
        html += '<tr>'; 
        for(var key in dataArray[i]){
            html += '<td>' + dataArray[i][key] + '</td>'; 
        }
        html += '</tr>';
    }
    html += '</table>'; 
    return html; 
}

data = {
    ver: [
        {"0":"1","id_pemasang":"1","1":"1","id_jenis_pemasang":"1","2":null,"npwp":null,"3":"Yos Sudarso","nama":"Yos Sudarso","4":"Perumahan Griya Perwita No.10","alamat":"Perumahan Griya Perwita No.10","5":"Yogyakarta","kota":"Yogyakarta","6":"0274-541056","telepon":"0274-541056","7":"08134570378","handphone":"08134570378","8":"0","diskon":"0"},
        {"0":"2","id_pemasang":"2","1":"2","id_jenis_pemasang":"2","2":"34.081.203.1-342.000","npwp":"34.081.203.1-342.000","3":"CV. Prima Agung","nama":"CV. Prima Agung","4":"Jl. Cenderawasih No.72 Warungboto","alamat":"Jl. Cenderawasih No.72 Warungboto","5":"Yogyakarta","kota":"Yogyakarta","6":"0274-878906","telepon":"0274-878906","7":null,"handphone":null,"8":"5","diskon":"5"},
        {"0":"3","id_pemasang":"3","1":"2","id_jenis_pemasang":"2","2":null,"npwp":null,"3":"PT. Tampil Jaya","nama":"PT. Tampil Jaya","4":"Jl. Alamanda No.3","alamat":"Jl. Alamanda No.3","5":"Yogyakarta","kota":"Yogyakarta","6":"0274-552233","telepon":"0274-552233","7":null,"handphone":null,"8":"20","diskon":"20"}
    ] 
};

document.getElementById('destination').innerHTML = ToTable(data.ver);

HTML是指超文本标记语言。
<div id='destination'></div>
for(i=N; i<V; i++){ 是更快的方式，而且 ver 应该是 "ver"，符合精确的有效JSON结构方案。 - Roko C. Buljan
@roXon - 确实如此，但这样我就需要提前知道列数。如果他的JSON是一个二维数组，则可能更好。负载更小，迭代更容易。 - Brandon Boone
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接