-2

我正在尝试动态解析 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>
4

3 回答 3

1

您的zoho字符串不是一个对象，而是一个字符串，并且以它开头?(不是有效的 JSON。它甚至不是有效的 Javascript —— 看看那些错误的引号。

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

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

于 2013-07-27T05:26:38.127 回答
1

appendChild仅适用于实际的 DOM 类型一节点。由于看起来您只是在附加字符串值，因此请尝试使用textContent =

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

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

于 2013-07-27T05:28:38.390 回答
0

为了任何可能看到这一点并有类似担忧的人的利益。正确的代码如下。我传入解析它的 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);
    });

};
于 2013-07-28T03:59:53.693 回答