将html table中的数据封装成json格式数据

本文介绍了一种将HTML表格转换为JSON格式的方法,并演示了如何通过JavaScript获取表格中的数据及单元格属性。代码示例展示了如何遍历表格的每一行每一列,形成JSON数组,同时提供了获取如height、width等单元格属性的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

var tab=document.getElementById("table1");
    var rows=tab.rows;
    //alert(rows.length);
    var txt = "[";
    for(var i=2;i<rows.length;i++)
    {
    var r = "[";   
        for(var j=0;j<rows[i].cells.length;j++)
        {
            // alert("第"+(i+1)+"行,第"+(j+1)+"列的值是:"+rows[i].cells[j].innerHTML);
            r += "\"" + rows[i].cells[j].innerHTML+"\",";
        }
    r = r.substring(0, r.length - 1);
    r += "],";
    txt += r;
    }
    txt = txt.substring(0, txt.length - 1);
    txt += "]";
    // alert(txt);


     JSONArray jsonarray = JSONArray.fromObject(txt);
     for(int i=0;i<jsonarray.size();i++){
         log.debug(jsonarray.get(i));
         JSONArray jsoncol = JSONArray.fromObject(jsonarray.get(i));
         for(int j=0;j<jsoncol.size();j++){
             log.debug(jsoncol.get(j));
         }
    }

    // 获得属性值

            function tableToJson(id){
                   var styleArray=["height","rowspan","width","align","colspan"];
                   var tab=document.getElementById(id);
                    var rows=tab.rows;
                    var txt = "[";
                    for(var i=0;i<rows.length;i++)
                    {
                    var r = "[";   
                    for(var j=0;j<rows[i].cells.length;j++)
                        {
                           var c="{";
                           for (var k = 0; k < styleArray.length; k++) {
                               c+="\""+styleArray[k]+"\":\""+$(rows[i].cells[j]).attr(styleArray[k])+"\",";
                           }
                           c+="\"title\":"+"\"" + rows[i].cells[j].innerHTML+"\"";
                           c+="},";
                           r += c;
                        }
                    r = r.substring(0, r.length - 1);
                    r += "],";
                    txt += r;
                    }
                    txt = txt.substring(0, txt.length - 1);
                    txt += "]";
                    return txt;
            }

    

转载于:https://www.cnblogs.com/ckaifeng/p/4955725.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值