Question

我是初学者，使用JSON。我试图创建一个包含json元素的表，它的工作原理。

这是代码

<script>
var js = '{ "classification" : ['+
'{ "Img":"banana.jpg" , "Species":"Banana", "Class":"Fruit", "Color":"Yellow" },' +
'{ "Img":"apple.jpg" , "Species":"Apple", "Class":"Fruit", "Color":"Red" },' +
'{ "Img":"grape.jpg" , "Species":"Grape", "Class":"Fruit", "Color":"Purple" },' +
'{ "Img":"tomato.jpg" , "Species":"Tomato", "Class":"Vegetable", "Color":"Red" },' +
'{ "Img":"carrot.jpg" , "Species":"Carrot", "Class":"Vegetable", "Color":"Orange" },' +
'{ "Img":"spinach.jpg" , "Species":"Spinach", "Class":"Vegetable", "Color":"Green" } ]}';

var parser = JSON.parse(js);

//var x = parser.classification[0].Class;
</script>
<script>
var cTable = document.createElement('table');
cTable.id = "json-test";
cTr = document.createElement('tr');
var th1 = document.createElement('th');
th1.innerHTML = 'Img';
var th2 = document.createElement('th');
th2.innerHTML = "Species";
var th3 = document.createElement('th');
th3.innerHTML = "Class";
var th4 = document.createElement('th');
th4.innerHTML = "Color";
cTr.appendChild(th1);
cTr.appendChild(th2);
cTr.appendChild(th3);
cTr.appendChild(th4);
cTable.appendChild(cTr);
for(i = 0; i<6;i++)
{
    var cRow = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.innerHTML = '<img src='+parser.classification[i].Img+'></img>';
    var td2 = document.createElement("td");
    td2.innerHTML = parser.classification[i].Species;
    var td3 = document.createElement("td");
    td3.innerHTML = parser.classification[i].Class;
    var td4 = document.createElement("td");
    td4.innerHTML = parser.classification[i].Color;
    cRow.appendChild(td1);
    cRow.appendChild(td2);
    cRow.appendChild(td3);
    cRow.appendChild(td4);
    cTable.appendChild(cRow);
}
document.body.appendChild(cTable);
</script>

但是，我想在下面添加一个允许用户在用户提交表单按钮时输入新元素的输入框。是否可以将输入框的值插入JSON对象以及表格行？

<form>
    <input id="img" type="text"/>
    <input id="species" type="text" />
    <input id="class" type="text" />
    <input id="color" type="text" />
    <input type="submit" value="submit" id="submit"/>
</form>

Answer 1

var js = '{ "classification" : [' +
    '{ "Img":"banana.jpg" , "Species":"Banana", "Class":"Fruit", "Color":"Yellow" },' +
    '{ "Img":"apple.jpg" , "Species":"Apple", "Class":"Fruit", "Color":"Red" },' +
    '{ "Img":"grape.jpg" , "Species":"Grape", "Class":"Fruit", "Color":"Purple" },' +
    '{ "Img":"tomato.jpg" , "Species":"Tomato", "Class":"Vegetable", "Color":"Red" },' +
    '{ "Img":"carrot.jpg" , "Species":"Carrot", "Class":"Vegetable", "Color":"Orange" },' +
    '{ "Img":"spinach.jpg" , "Species":"Spinach", "Class":"Vegetable", "Color":"Green" } ]}';

var parser = JSON.parse(js);
var data = parser.classification;

function createTable() {
    var cTable = document.createElement('table');
    cTable.id = "json-test";
    cTr = document.createElement('tr');
    var th1 = document.createElement('th');
    th1.innerHTML = 'Img';
    var th2 = document.createElement('th');
    th2.innerHTML = "Species";
    var th3 = document.createElement('th');
    th3.innerHTML = "Class";
    var th4 = document.createElement('th');
    th4.innerHTML = "Color";
    cTr.appendChild(th1);
    cTr.appendChild(th2);
    cTr.appendChild(th3);
    cTr.appendChild(th4);
    cTable.appendChild(cTr);
    document.body.appendChild(cTable);
    for (i = 0; i < data.length; i++) {
        addNewRow(parser.classification[i]);
    }
}

function addNewRow(data) {
    var cTable = document.getElementById('json-test');
    var cRow = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.innerHTML = '<img src=' + data.Img + '></img>';
    var td2 = document.createElement("td");
    td2.innerHTML = data.Species;
    var td3 = document.createElement("td");
    td3.innerHTML = data.Class;
    var td4 = document.createElement("td");
    td4.innerHTML = data.Color;
    cRow.appendChild(td1);
    cRow.appendChild(td2);
    cRow.appendChild(td3);
    cRow.appendChild(td4);
    cTable.appendChild(cRow);
}
window.addEventListener("load", createTable);

document.forms[0].onsubmit = function () {
    var img = this.img.value;
    var species = this.species.value;
    var clas = this.class.value;
    var color = this.color.value;
    var obj = {
        "Img": img,
            "Species": species,
            "Class": clas,
            "Color": color
    }
    parser.classification.push(obj);
    addNewRow(obj)
    js = JSON.stringify(parser);
    return false;
}

Demo

Answer 2

请尝试此演示：

http://jsfiddle.net/n9fwyw20/1/

我做了一些修改，但我想你会理解它们。此外，我还添加了一个事件处理函数来阻止您的表单被提交，因此您必须考虑另一种发送表单数据的方式，例如ajax提交。

formOnSubmit = function() {

    //Add your ajax call here

    var jsonRow = { "Img": document.getElementById("img").value , "Species": document.getElementById("species").value, "Class": document.getElementById("class").value, "Color": document.getElementById("color").value }

    addRow(jsonRow);
    parser.classification.push(jsonRow);

    return false;
}

干杯！

添加json创建的元素表

2 个答案:

Demo