Question

为什么在将数据输入到输入字段中并单击“提交”时，每次提交数据时都没有将数据添加到表中？数据应更新到表中。我使用过Javascript和JSON。我不知道我在代码的哪个地方出错了。

<body>
    <fieldset id="styfe">
        <legend>Insert Data</legend>
        <input type="text" id="inpbok"> <br><br>
        <input type="text" id="inpdur"><br><br>
        <input type="text" id="inpct"><br><br>
        <input type="button" id="btninsert" value="Submit">
    </fieldset>
    <br><br>

    <fieldset>
        <legend>Local Storage</legend>
        <table id="isOutput">
            <thead>
                <th>BOOK </th>
                <th>DUR</th>
                <th>CT</th>
            </thead>
            <tr>
                <td id="bok"></td>
                <td id="dur"></td>
                <td id="ct"></td>
            </tr>
        </table>
        <div id="isOutput"></div>
    </fieldset>
</body>
<script>
    let pro = [{
            bok: "bok",
            dur: "01",
            ct: "1.25"
        },

        {
            bok: "saleem",
            dur: "08",
            ct: "1.29"
        }

        ];

    btninsert.onclick = function (bok, dur, ct) {
        if (JSON.parse(localStorage.getItem('userinput')) != null) {
            localStorage.setItem('userinput', JSON.stringify(pro));
        }

        let obj = {
            bok: document.getElementById('inpbok').value,
            dur: document.getElementById('inpdur').value,
            ct: document.getElementById('inpct').value

        }
        pro.push(obj);
        //console.log(person);
        localStorage.setItem('userinput', JSON.stringify(pro));

        // now we are going to store it in the localstorage 
        if (bok && dur && ct) {
            localStorage.setItem(bok, dur, ct);
            location.reload();
        }
    };


    for (let i = 0; i < localStorage.length; i++) {
        $('#bok').append("<td>" + localStorage[i].bok + "</td>");
        $('#dur').append("<td>" + localStorage[i].dur + "</td>");
        $('#ct').append("<td>" + localStorage[i].ct + "</td>");
    }
</script>

将数据插入表字段

0 个答案: