Question

我正在尝试动态解析JSON数据并在html表中的行中填充数据。

我写了下面的测试，并没有真正看到它为什么不起作用的原因。

编辑：更正了两个语法错误。

<tohead>

<script>

var zoho = "?({"Products":[{"model":"UN55F8000BFXZA","phone":"1234567890","price":"2999.99","manufacturer":"Samsung","purchaseDate":"2013-07-26"}]});"

$(document).ready(function(){
   processRecord(zoho);
});

function addRow(inc) {

   VAR table = document.getElementById("dataTable");

   VAR rowCount = table.rows.length;
   VAR row = table.insertRow(rowCount);

   VAR cell1 = row.insertCell(0);
   VAR element1 = document.createElement("div");
   element1.id = 'manufacturer' + inc;
   element1.class = "text";
   cell1.appendChild(element1);

   VAR cell2 = row.insertCell(1);
   VAR element2 = document.createElement("div");
   element2.id = 'purchaseDate' + inc;
   element2.class = "text";
   element2.align = "center";
   cell2.appendChild(element2);

   VAR cell3 = row.insertCell(2);
   VAR element3 = document.createElement("div");
   element3.id = 'endingDate' + inc;
   element3.class = "text";
   element3.align = "center";
   cell3.appendChild(element3);

};

function processRecord(zoho_data){
   for (var i=0; i<zoho_data.length; i++){

   addRow(i);

   var phonenumber = zoho_data.Products[i].phone;
   var zmanufacturer = zoho_data.Products[i].manufacturer;
   var zmodel = zoho_data.Products[i].model;
   var zpurchaseDate = zoho_data.Products[i].purchaseDate;

   document.getElementById('manufacturer' + i).appendChild(zmanufacturer);
   document.getElementById('purchaseDate' + i).appendChild(zpurchaseDate);
   document.getElementById('endingDate' + i).appendChild(d1);
   }
};

</script>

</tohead>

<HTML>
<HEAD>

</HEAD>
<BODY>


<TABLE id="dataTable" width="546">

</TABLE>

</BODY>
</HTML>

编辑：为了回应这些评论，我减少了上述代码的复杂性，以缩小问题范围。下面的代码是只有createElement循环的新代码。

<HTML>
<HEAD>
<script>
$(document).ready(function(){
   addRow();
});

function addRow() {
    for (var i=0; i<4; i++)
    {
        VAR table = document.getElementById("dataTable");

        VAR rowCount = table.rows.length;
        VAR row = table.insertRow(rowCount);

        VAR cell1 = row.insertCell(0);
        VAR element1 = document.createElement("div");
        element1.setAttribute('id', 'manufacturer' + i);
        element1.setAttribute(class, 'text');
        cell1.appendChild(element1);

        VAR cell2 = row.insertCell(1);
        VAR element2 = document.createElement("div");
        element2.setAttribute('id', 'purchaseDate' + i);
        element2.setAttribute(class, 'text');
        element2.setAttribute(align, 'center');
        cell2.appendChild(element2);

        VAR cell3 = row.insertCell(2);
        VAR element3 = document.createElement("div");
        element3.setAttribute('id', 'endingDate' + i);
        element3.setAttribute(class, 'text');
        element3.setAttribute(align, 'center');
        cell3.appendChild(element3);
    }
};
</script>     
</HEAD>
<BODY>

<TABLE id="dataTable" width="546" border="1">
    <tr>
    <td>boo</td>
    </tr>
</TABLE>

</BODY>
</HTML>

Answer 1

您的zoho字符串不是对象，而是字符串，因为它以?(开头，所以它不是有效的JSON。它甚至不是有效的Javascript - 只要查看那些错误的引号。

您需要修复JSON以使其成为有效的JSON，然后您需要将JSON字符串转换为Javascript对象。

然后，您需要修复document.getElementById(dataTable)，因为您的程序中不存在此类变量dataTable。你的意思是字符串"dataTable"？

Answer 2

appendChild仅适用于实际DOM类型的一个节点。由于您似乎只是追加字符串值，请尝试使用textContent =

请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

如果要将它们作为自己的元素追加，则需要使用：document.createElement以便appendChild可以工作（因为它属于Node对象）。

Answer 3

为了任何可能看到这一点并且有类似顾虑的人的利益。正确的代码如下。我传入以JSON格式返回的函数数据解析它，并将其写入动态创建的“div”，在动态创建的表行内。

function processData(zoho_data){

    $.each(zoho_data.Products, function() {

        var phonenumber = this.phone;
        var zmanufacturer = this.manufacturer;
        var zmodel = this.model;
        var zpurchaseDate = this.purchaseDate;

        var d1 = Date.parse(zpurchaseDate).add(4).year().toString('yyyy-MM-dd');

        var table = document.getElementById("datatable");

        var row = table.insertRow(-1);

        var cell1 = row.insertCell(-1);
        var element1 = document.createElement("div");
        element1.setAttribute('class', 'text');
        cell1.innerHTML = zmanufacturer + " " + zmodel;
        cell1.appendChild(element1);

        var cell2 = row.insertCell(-1);
        var element2 = document.createElement("div");
        element2.setAttribute('class', 'text');
        element2.setAttribute('align', 'center');
        cell2.innerHTML = zpurchaseDate;
        cell2.appendChild(element2);

        var cell3 = row.insertCell(-1);
        var element3 = document.createElement("div");
        element3.setAttribute('class', 'text');
        element3.setAttribute('align', 'center');
        cell3.innerHTML = d1;
        cell3.appendChild(element3);
    });

};

使用document.createElement（“div”）动态创建表行和div;

3 个答案: