0

私は自分の値をローカルストレージに保存しており、テーブルに情報を表示しようとしていますが、うまくいかないようで、常に最初の列に出力され、垂直に下がります。例えば自分の情報を入力するとこう出てきてほしい

|残高|名前|数量|価格|

| | 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 + ".......................");

これは常に行が表示されるためコメントアウトされていますが、この方法で機能してもそのようにしたくありません

4

1 に答える 1

0

テーブルの列ヘッダーを 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があります。
これが役立つことを願っています:-)

于 2013-04-16T23:01:33.113 に答える