Question

我将数据存储在本地存储中，因此我尝试调用将显示该数据的ca函数。但是，我能够看到数据，但它没有在表格中显示。如果有人可以告诉我如何修改我的代码，以便数据显示在其应用单元格中的表格中，那将是很好的。这是我的Javascript：

function call() {
'use strict';
var get, create, text, i;
get = localStorage.getItem("A");//retrieves announcements from local storage 
create = JSON.parse(get);

text = "";
for (i = 0; i < 1; i++) { //displays multiple announcements
    text += "<td>" + create[i].username;//displaysname
    text += "<td>" + create[i].club;//displaysclub
    text += "<td>" + create[i].category;//displayscategory
    text += "<td>" + create[i].grade;//displaysgrade
    text += "<td>" + create[i].gender;//displaysgender
    text += "<td>" + create[i].Time;//displaystime
    text += "<td>" + create[i].detail + "<tr>";
}
document.getElementById("cool").innerHTML = text;

}

这是我创建表格的html页面：

 <title>Homepage Announcements</title>
    </head>
         <fieldset display:inline-block>
    <legend class="legend">
      Announcement Creator</legend>  

        <body>
 <div class="button">
     <button value="call" value="Display Announcements" onclick="call()">Display Announcements</button></div>


    <style>
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}
</style>
<thead>
<table>
                  <tr>
                    <th class="head">Username</th>
                    <th class="head">Club</th>
                    <th class="head">Category</th>
                    <th class="head">Grade</th>
                    <th class="head">Gender</th>
                    <th class="head">Time</th>
                    <th class="head">Detail</th>
                  </tr>


</table>
     </thead>
<p id="cool"></p>

这是JSON部分：

var index = 0;
var announcement = [];
function rtdata() {
    'use strict';
    window.alert("Your announcement has been posted!");
    announcement[index] = {
        username : document.getElementById("username").value,
        club : document.getElementById("club").value,
        category : document.getElementById("category").value,
        grade : document.getElementById("grade").value,
        gender : document.getElementById("gender").value,
        time : document.getElementById("time").value,
        details : document.getElementById("details").value
    };
    index = index + 1;
    localStorage.setItem("A", JSON.stringify(announcement));
}

Answer 1

将您的HTML更改为：

<table>
<thead>
                  <tr>
                    <th class="head">Username</th>
                    <th class="head">Club</th>
                    <th class="head">Category</th>
                    <th class="head">Grade</th>
                    <th class="head">Gender</th>
                    <th class="head">Time</th>
                    <th class="head">Detail</th>
                  </tr>
</thead>
<tbody id="cool">
</tbody>

</table>

你javascript到这个：

for (i = 0; i < create.length; i++) { //displays multiple announcements
    text += "<tr>";
    text += "<td>" + create[i].username+ "</td>";//displaysname
    text += "<td>" + create[i].club+ "</td>";//displaysclub
    text += "<td>" + create[i].category+ "</td>";//displayscategory
    text += "<td>" + create[i].grade+ "</td>";//displaysgrade
    text += "<td>" + create[i].gender+ "</td>";//displaysgender
    text += "<td>" + create[i].Time+ "</td>";//displaystime
    text += "<td>" + create[i].detail+ "</td></tr>";
}

Answer 2

我讨厌构造HTML的字符串连接，所以倾向于像瘟疫一样避免它。我还避免在循环的终止条件中使用.length，因为这样做会导致在循环的每次迭代中调用.length成员。更好的选择是在循环之前获取一次值的副本并重新使用它。

对于它的价值，您实际上可以在不知道其名称的情况下迭代对象的属性。这意味着您可以循环遍历行和列 - 这可以避免输入成员字段名称时的拼写错误，这意味着您可以避免对表的标题进行硬编码并使代码更小更整洁。（我不经常使用这种技术）

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(id){return document.getElementById(id);}
function newEl(tag){return document.createElement(tag);}
///////////////////////////////////
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    displayData();
}

function newTd(newContent)
{
    var result = newEl('td');
    result.innerHTML = newContent;
    return result;
}

function displayData()
{
    var jsonData = [
                        {
                            username: 'enhzflep',
                            club: 'no',
                            category: 'n/a',
                            grade: '10',
                            gender: 'neutral',
                            Time: 'yes',
                            detail: 'no'
                        },
                        {
                            username: 'Cutie Pie',
                            club: 'programming',
                            category: 'special interest',
                            grade: 'A',
                            gender: 'unknown',
                            Time: 'yes',
                            detail: 'no'
                        }
                    ];

    var nItems = jsonData.length;
    for (var i=0; i<nItems; i++)
    {
        var tr = newEl('tr');
        tr.appendChild( newTd(jsonData[i].username) );
        tr.appendChild( newTd(jsonData[i].club) );
        tr.appendChild( newTd(jsonData[i].category) );
        tr.appendChild( newTd(jsonData[i].grade) );
        tr.appendChild( newTd(jsonData[i].gender) );
        tr.appendChild( newTd(jsonData[i].Time) );
        tr.appendChild( newTd(jsonData[i].detail) );
        byId('insertHere').appendChild(tr);
    }
}
</script>
<style>
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th class="head">Username</th>
                <th class="head">Club</th>
                <th class="head">Category</th>
                <th class="head">Grade</th>
                <th class="head">Gender</th>
                <th class="head">Time</th>
                <th class="head">Detail</th>
            </tr>
        <thead>
        <tbody id='insertHere'></tbody>
    </table>
</body>
</html>

如何将本地存储数据放入表中

2 个答案: