從本地存盤資料創建HTML

我想從本地存盤中獲取資料并動態顯示。在下表中是我嘗試過的代碼，但它不起作用。

<script>
   var cart= JSON.parse( localStorage.getItem('Mylinklist'));
    $.each(Mylinklist, function(key, value){
    $('tbody').append(`<tr>
    <td>${cart.name}</td>
    <td>${cart.url}</td>
    </tr>`)
    })
</script>

<div id="actionerpanel" class="col col-lg-6 col-12 ">
  <div class="rapi-card m-lg-5 m-1">
    <b class="rapi-card-colored-header p-3  mb-2">Quick Links  <a href="add.html" class=""> <span>&#43;</a></span></b>
                
        <div class="container">
                
        <div class="row justify-content-center "><table class="table">
            <thead>
                <tr>
                   <th scope="col">Link Name</th>
                   <th scope="col">Url</th>
                   <th scope="col">Actions</th>
                </tr>
               </thead>
            <tbody>
                      
                </tbody>
                </table>
        </div>
        </div>
                    
        </div>
        </div>

uj5u.com熱心網友回復：

您可以使用insertAdjacentHTML和literals templates進行此類操作。

var carts = [{
  id: 'id1',
  name: 'test',
  url: 'url'
}, {
  id: 'id2',
  name: 'test2',
  url: 'url2'
}] //Fake localstorage replace it with JSON.parse
carts.forEach(cart => {
  let button = `<button onclick="alert('Item id : ${cart.id}')">Click</button>`,
    row = `<tr id="item_${cart.id}"><td>${cart.name}</td><td>${cart.url}</td><td>${button}</td></tr>`;
  document.querySelector('tbody').insertAdjacentHTML('beforeend', row)
})

//OR

for (let cart of carts) {
  let button = `<button onclick="alert('Item id : ${cart.id}')">Click</button>`,
    row = `<tr id="item_${cart.id}"><td>${cart.name}</td><td>${cart.url}</td><td>${button}</td></tr>`;
  document.querySelector('tbody').insertAdjacentHTML('beforeend', row)
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">Link Name</th>
      <th scope="col">Url</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

uj5u.com熱心網友回復：

你可以像這樣用普通的 JS 來制作它。我不得不用 localstorage 注釋掉這些地方。因為 SO 上不允許訪問 localStorage。一旦添加它們，它就會起作用。

const arr = [
  {id: 123, name: "google", url: "https://www.google.com"},
  {id: 124, name: "bing", url: "https://www.bing.com"},
]

// store to localStorage
//    localStorage.setItem('Mylinklist', JSON.stringify(arr));

// get from localStorage
//    const data = JSON.parse(localStorage.getItem('Mylinklist'));
const table = document.querySelector('.table');
// change obj.forEach to data.forEach because in SO you cant use localStorage!!!
arr.forEach((e) => {
  let tr = document.createElement('TR');
  let td_name = document.createElement('TD');
  let td_url = document.createElement('TD');
  td_name.innerHTML = e.name
  td_url.innerHTML = e.url
  tr.append(td_name)
  tr.append(td_url)
  table.append(tr)
})

<div class="row justify-content-center "><table class="table">
       <thead>
         <tr>
          <th scope="col">Link Name</th>
          <th scope="col">Url</th>
          <th scope="col">Actions</th>
         </tr>
      </thead>
    <tbody>
                      
  </tbody>
</table>
</div>

標籤：javascript html

上一篇：我可以將公共專案的Github問題創建限制為成員嗎？

下一篇：swiper幻燈片中影像周圍奇怪的灰色邊框