如何使用javascript Json动态添加到html表中

how to dynamically add to html table using javascript Json

本文关键字：html 表中 添加 动态 何使用 javascript Json      更新时间：2024-05-21

这是我的代码如何动态添加html表不使用Jquery。只使用html和javascript。该代码是服务器到客户端的应用程序，该客户端接收Json对象以字符串形式解析。如何添加html表。

    ## <!doctype html>
  <html>
   <head>
   <meta charset="utf-8">
   <title>Untitled Document</title>
   <script src="E:'vj'SignalR'json_js'json.js"></script>
    <script src="E:'vj'SignalR'json_js'json2.js"></script>

   <script src="E:'vj'SignalR'json_js'bson'bson.js"></script>
   <script type="text/javascript">
    var ws = new WebSocket("ws://localhost:8100");
 var received_msg;
 var Dictionary=new Dictionary();
 var globalSymbol;
 function WebSocketTest() 
 {                             

        ws.onerror = function () 
        {
            alert("error");
        };
        ws.onopen = function () 
        { 
    alert("Client Connected");
            ws.send("New1");

        };

        ws.onclose = function () 
        {                
            alert("Connection is closed...");
        };
    ws.onmessage=function(evt)
    {
    var msg=evt.data
    alert(msg);
    var jsn=JSON.parse(evt.data);
    //var text =('{"newQuote":' + jsn);

      var tbl = document.getElementById('_table_Quote_ID');
      var lastRow = tbl.rows.length;  
      var iteration = lastRow;
      var row = tbl.insertRow(lastRow)
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);
      var cell5 = row.insertCell(4);
        cell1.innerHTML = jsn[0].symbol;
        cell2.innerHTML = jsn[1].bid;
        cell3.innerHTML = jsn[2].ask;
        cell4.innerHTML = jsn[3].high;
        cell5.innerHTML = jsn[4].low;

首先，我理解你说的"我如何创建动态表"，我希望这段代码可以解决你的问题

   <script>
        var length = 5 // this is your data lenght i write 5 for examples
        var table = "<table border = '1' cellpadding='10'>";
        for (var i = 0 ; i < length ; i++) {
            table += "<tr>";
            for (var j = 0 ; j < length ; j++) {
                table += "<td> value </td>";
            }
            table += "</tr>";
        }
        table += "<table>";
        document.write(table);
    </script>

相关文章：