Question

我将我的值存储到本地存储中，并且我试图在表格中显示信息，但它似乎无法工作，并且它总是将其输出到第一列垂直向下。例如，当我输入我的信息时，我想让它像这样出来

|余额|名称|数量|价格|

| 100 |测试| 100 | 1.99 |

但是它当前显示如下：

|资产|名称|数量|价格| | 100 | |考试| | 100 | | 1.99 |

这是我本地存储的代码

function save(item) {
            var playlistArray = getStoreArray("playlist");
            playlistArray.push(item);
            localStorage.setItem("playlist", JSON.stringify(playlistArray));
        }

function Load_storage() {
            var playlistArray = get_Storage();
            var ul = document.getElementById("playlist");
            if (playlistArray != null) {

                for (var i = 0; i < playlistArray.length; i++) 
                {
                    var li = document.createElement("table");
                li.innerHTML = playlistArray[i];
                    ul.appendChild(li);
                                                                                        }
            }
        } 

function get_Storage() {
            return getStoreArray("playlist");
        }

function getStoreArray(key) {
            var playlistArray = localStorage.getItem(key);
            if (! playlistArray) {
                playlistArray = new Array();
            }
            else {
                playlistArray = JSON.parse(playlistArray);
            }
            return playlistArray;
        }

我通过此功能将其放入本地存储

   var table=document.getElementById("myTable");
   var row=table.insertRow(1);
   var cell1=row.insertCell(0); // bank account
   var cell2=row.insertCell(1); // name
   var cell3=row.insertCell(2); // Quantity
   var cell4=row.insertCell(3); // price

   cell1.innerHTML=Balance ;                // bank account
   cell2.innerHTML=name;            //stock symbol
   cell3.innerHTML=quantity;            // Quantity
   cell4.innerHTML=price;               // bought
            var SAVE= document.getElementById("myTable");
                SAVE.appendChild(row);

                save(cell1.innerHTML);
                save(cell2.innerHTML);
                save(cell3.innerHTML);
                save(cell4.innerHTML);                  
 //  save(Balance+"......................."+
                name+"......................."+
                quantity+"......................."+
                price + ".......................");

这是注释掉的，因为它总会显示该行，但我不希望这样，即使通过这种方式也能正常工作

Answer 1

将表格列标题放在html中。它比使用JavaScript更有效：

<body>
    <table id='myTable'>
        <thead>
        <tr>
            <th>Balance</th>
            <th>Name</th>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
        </thead>
    </table>
</body>

JavaScript的一些更改：

var table = document.getElementById("myTable"),

    row = table.insertRow(1),
    cell1 = row.insertCell(0), // bank account
    cell2 = row.insertCell(1), // name
    cell3 = row.insertCell(2), // Quantity
    cell4 = row.insertCell(3), // price

    testBalance = '3.00',
    testName = 'Mike',
    testQuantity = '2.00',
    testPrice = '5.00';

cell1.innerHTML = testBalance; // bank account
cell2.innerHTML = testName; //stock symbol
cell3.innerHTML = testQuantity; // Quantity
cell4.innerHTML = testPrice; // bought

//you can remove these lines
//var SAVE = document.getElementById("myTable");
//SAVE.appendChild(row);

save(cell1.innerHTML);
save(cell2.innerHTML);
save(cell3.innerHTML);
save(cell4.innerHTML);
//  save(Balance+"......................."+
// name + "......................." +
// quantity + "......................." + 
//price + //".......................");

这是jsFiddle 我希望这会有所帮助： - ）

本地存储表

1 个答案: