如何將無序列表轉換爲表格？

如何將無序列表轉換爲表格。下面的代碼返回無序列表。如何將無序列表轉換爲表格？

var jsonString = '{"data":{"2G":[{"amount":"9","detail":"35 MB 2G Data , Post 35 MB you will be charged at 4p\/10kb","validity":"1 Day","talktime":"0"},{"amount":"16","detail":"90 MB 2G Data, Post 90 MB you will be charged at 4p\/10kb","validity":"2 Days","talktime":"0"},{"amount":"28","detail":"160 MB 2G Data, Post 160 MB you will be charged at 4p\/10kb","validity":"4 Days","talktime":"0"},{"amount":"54","detail":"300 MB 2G Data, Post 300 MB you will be charged at 4p\/10kb","validity":"7 Days","talktime":"0"},{"amount":"78","detail":"310 MB 2G Data , Post 310 MB you will be charged at 4p\/10kb","validity":"10 Days","talktime":"0"},{"amount":"95","detail":"550 MB 2G Data, Post 550 MB you will be charged at 4p\/10kb","validity":"14 Days","talktime":"0"},{"amount":"125","detail":"700 MB 2G Data, Post 700 MB you will be charged at 4p\/10kb","validity":"18 Days","talktime":"0"},{"amount":"155","detail":"850 MB 2G Data, Post 850 MB you will be charged at 4p\/10kb","validity":"21 Days","talktime":"0"},{"amount":"179","detail":"1 GB 2G Data, Post 1 GB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"},{"amount":"198","detail":"Hero Recharge : Get 1.25 GB 2G Data assured benefit (upto 3 GB 2G Data with hero recharge)","validity":"28 Days","talktime":"0"},{"amount":"199","detail":"2 GB Unlimted 2G Data, Post 2 GB your speed will be reduced up to 40kbps","validity":"28 Days","talktime":"0"},{"amount":"249","detail":"3 GB Unlimted 2G Data, Post 3 GB your speed will be reduced up to 40kbps","validity":"28 Days","talktime":"0"},{"amount":"205","detail":"1 GB 2G Data Day + Extra 1 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"305","detail":"2 GB 2G Data Day + Extra 2 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"395","detail":"3 GB 2G Data Day + Extra 3 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"57","detail":"190 MB 2G Data, Post 190 MB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"},{"amount":"98","detail":"300 MB 2G Data, Post 300 MB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"}]},"resCode":"200","resText":"SUCCESS"}'; 

$(document).ready(function() { 
    var $amountlist = $('#amount'); 
    var $detaillist = $('#detail'); 
    var $validitylist = $('#validity'); 
    var $talktimelist = $('#talktime'); 
    var myData = $.parseJSON(jsonString);  
    console.log(myData.data["2G"]); 
    $.each(myData.data["2G"], function(i,dataElem) { 
     $('<li>' + dataElem.amount + '</li>').appendTo($amountlist); 
     $('<li>' + dataElem.detail + '</li>').appendTo($detaillist); 
     $('<li>' + dataElem.validity + '</li>').appendTo($validitylist); 
     $('<li>' + dataElem.talktime + '</li>').appendTo($talktimelist); 
    }); 
});

jsfiddle

來源

2017-02-20 Venkatesh Panabaka

http://jsfiddle.net/NJMyD/5210/ –

實施例可以方便地可讀性： -

var jsonString = '{"data":{"2G":[{"amount":"9","detail":"35 MB 2G Data , Post 35 MB you will be charged at 4p\/10kb","validity":"1 Day","talktime":"0"},{"amount":"16","detail":"90 MB 2G Data, Post 90 MB you will be charged at 4p\/10kb","validity":"2 Days","talktime":"0"},{"amount":"28","detail":"160 MB 2G Data, Post 160 MB you will be charged at 4p\/10kb","validity":"4 Days","talktime":"0"},{"amount":"54","detail":"300 MB 2G Data, Post 300 MB you will be charged at 4p\/10kb","validity":"7 Days","talktime":"0"},{"amount":"78","detail":"310 MB 2G Data , Post 310 MB you will be charged at 4p\/10kb","validity":"10 Days","talktime":"0"},{"amount":"95","detail":"550 MB 2G Data, Post 550 MB you will be charged at 4p\/10kb","validity":"14 Days","talktime":"0"},{"amount":"125","detail":"700 MB 2G Data, Post 700 MB you will be charged at 4p\/10kb","validity":"18 Days","talktime":"0"},{"amount":"155","detail":"850 MB 2G Data, Post 850 MB you will be charged at 4p\/10kb","validity":"21 Days","talktime":"0"},{"amount":"179","detail":"1 GB 2G Data, Post 1 GB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"},{"amount":"198","detail":"Hero Recharge : Get 1.25 GB 2G Data assured benefit (upto 3 GB 2G Data with hero recharge)","validity":"28 Days","talktime":"0"},{"amount":"199","detail":"2 GB Unlimted 2G Data, Post 2 GB your speed will be reduced up to 40kbps","validity":"28 Days","talktime":"0"},{"amount":"249","detail":"3 GB Unlimted 2G Data, Post 3 GB your speed will be reduced up to 40kbps","validity":"28 Days","talktime":"0"},{"amount":"205","detail":"1 GB 2G Data Day + Extra 1 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"305","detail":"2 GB 2G Data Day + Extra 2 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"395","detail":"3 GB 2G Data Day + Extra 3 GB 2G Night Data (12AM to 6AM)","validity":"28 Days","talktime":"0"},{"amount":"57","detail":"190 MB 2G Data, Post 190 MB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"},{"amount":"98","detail":"300 MB 2G Data, Post 300 MB you will be charged at 4p\/10kb","validity":"28 Days","talktime":"0"}]},"resCode":"200","resText":"SUCCESS"}'; 
 

 
$(document).ready(function() { 
 
    var amountlist = $('#amountlist tbody'); 
 
    var myData = $.parseJSON(jsonString);  
 
    $.each(myData.data["2G"], function(i,dataElem) { 
 
     $('<tr>').appendTo(amountlist); 
 
     $('<td>' + dataElem.amount + '</td>').appendTo(amountlist); 
 
     $('<td>' + dataElem.detail + '</td>').appendTo(amountlist); 
 
     $('<td>' + dataElem.validity + '</td>').appendTo(amountlist); 
 
     $('<td>' + dataElem.talktime + '</td>').appendTo(amountlist); 
 
     $('</tr>').appendTo(amountlist); 
 
    }); 
 
});

table >tbody{ 
 
word-break: keep-all; 
 
width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id = "amountlist"> 
 
<table> 
 
    <thead> 
 
    <th>amount</th> 
 
    <th>detail</th> 
 
    <th>validity</th> 
 
    <th>talktime</th> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table> 
 
</div>

注： - 改變代碼+ CSS一個ccording您wish.Thanks

來源

2017-02-20 07:41:14

感謝你回答。但數據問題不附加到表格。你能幫我一下嗎？我想更新以上數據到數據表 –

你需要檢查與jQuery示例演示的dta表。這是非常廣泛的話題，不能在這裏支持。點擊這裏查看不同的例子： - https://datatables.net/examples/index –

對不起。非常感謝你.. –

$(document).ready(function() { 
var rows = '<tr><th>amount</th><th>detail</th><th>validity</th><th>talktime</th></tr>'; 
    $.each(myData.data["2G"], function(i, dataElem) { 
    rows += '<tr><td>' + dataElem.amount + '</td><td>' + dataElem.detail + '</td><td>' + dataElem.validity + '</td><td>' + dataElem.talktime + '</td></tr>'; 

    }); 

    $('#tab').html(rows); 
});

在HTML

<table id="tab"></table>

來源

2017-02-20 07:48:21

如何將無序列表轉換爲表格？

回答

相關問題