Javascript 显示来自本地存储阵列的数据问题

Question

我正在使用 Javascript 创建一个简单的 CRUD 应用程序，但在从本地存储显示数据表时遇到问题。

这就像制作一个待办事项列表，但这是一个表格，并在一行和一列中输入数据。

我不知道如何清楚地解释问题，重要的是我希望我输入表单并提交到本地存储的结果在表格中正确显示。

这是代码：

const 
  myForm       = document.forms['my-form']  // form name pada tag html form
, table        = document.querySelector('#myTable tbody')
, dataArr       = JSON.parse(localStorage.getItem('dataArr') || '[]');

var selectedRow = null
var number = 0

// Tabel init
dataArr.forEach(row=>{
    let newRow = table.insertRow()

    newRow.insertCell().textContent = row.no = ++number
    newRow.insertCell().textContent = row.inputNL
    newRow.insertCell().textContent = row.inputJK
    newRow.insertCell().textContent = row.inputNH
    newRow.insertCell().textContent = row.inputA 
    newRow.insertCell().innerHTML = `<a onClick="onDelete(this)"><i class="fas fa-times"></i></a>`
})

function onFormSubmit() {
    if (validate()) {
        if (selectedRow == null) {
            // Menambahkan entri ke LocalStorage :
            dataArr.push(Object.fromEntries(new FormData(myForm).entries()))
            localStorage.setItem('dataArr', JSON.stringify( dataArr ))
            
            // Memasukkan Data pada Baris Baru
            let newRow = table.insertRow()
            
            newRow.insertCell().textContent = myForm.no.value = ++number
            newRow.insertCell().textContent = myForm.inputNL.value
            newRow.insertCell().textContent = myForm.inputJK.value
            newRow.insertCell().textContent = myForm.inputNH.value
            newRow.insertCell().textContent = myForm.inputA.value
            newRow.insertCell().innerHTML = `<a onClick="onDelete(this)"><i class="fas fa-times"></i></a>` 
        } 
        resetForm();
    }
}

// Function untuk Mereset Data yang sudah diSumbit di dalam Input
function resetForm() {
    document.getElementById("no").value = "";
    document.getElementById("inputNL").value = "";
    document.getElementById("inputJK").value = "Pria";
    document.getElementById("inputNH").value = "";
    document.getElementById("inputA").value = "";
    selectedRow = null;
}

// Function untuk Delete Data
function onDelete(td) {
    if (confirm('Apa kamu yakin ingin Menghapus Data ini?')) {
        row = td.parentElement.parentElement;
        document.getElementById("myTable").deleteRow(row.rowIndex);
        resetForm();
    }
    hapusDataLocal(td.parentElement.parentElement)
}

function hapusDataLocal(dataItem) {    
    dataArr.forEach(function(task, index) {
        if (dataItem.textContent === task ) {            
            dataArr.splice(index, 1);
        }
    });
    localStorage.setItem(dataArr, JSON.stringify(dataArr))
}

// Function untuk Memvalidasi Data
function validate() {
    isValid = true;
    if (document.getElementById("inputNL").value == "" || document.getElementById("inputJK").value == "" || document.getElementById("inputNH").value == "" || document.getElementById("inputA").value == "") {
        isValid = false;
        alert("Isi Semua Formnya dengan Benar!");
    } 
    return isValid;
}

    <!-- Registration Form -->
    <div class="container w-50 mt-3 shadow p-3 mb-5 bg-white rounded">
      <div class="p-3">
          <h1 class="mb-4">Registration Form</h1>
            <form class="task-form" name="my-form" onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
              <input type="hidden" name="no" id="no" value=""> 
              <label for="inputNL" class="form-label">Nama Lengkap</label>
              <input type="text" id="inputNL" name="inputNL" class="form-control mb-2" placeholder="Nama Lengkap">
              <label for="inputJK"class="form-label">Jenis Kelamin</label>
              <select class="form-select mb-2" id="inputJK" name="inputJK">
                <option value="Pria">Pria</option>
                <option value="Wanita">Wanita</option>
              </select>            
              <label for="inputNH" class="form-label">No HP</label>
              <input type="number" id="inputNH" name="inputNH" class="form-control mb-2" placeholder="No HP">
              <label for="inputA" class="form-label">Alamat</label>
              <textarea id="inputA" name="inputA" class="form-control mb-2" style="min-width: 100%" placeholder="Alamat"></textarea>
              <input type="submit" value="Submit" class="btn btn-primary btn-md my-3">
            </form>
      </div>
    </div>
    <!-- Table -->
    <div class="container mt-3 shadow p-3 mb-5 bg-white rounded">
      <div class="p-3">
        <table class="table" id="myTable">
          <thead>
              <th scope="col">#</th>
              <th scope="col">Nama Lengkap</th>
              <th scope="col">Jenis Kelamin</th>
              <th scope="col">No HP</th>
              <th scope="col">Alamat</th>
              <th scope="col">Aksi</th>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>      
    </div>

这是表中的问题，数据与列不匹配。

而我想要的实际结果是这样的。

Answer 1

做这样的事...

const 
  myForm       = document.forms['my-form']  // unique reference for ALL form's elements
, myTableTBody = document.querySelector('#myTable tbody')
, dataNL       = JSON.parse(localStorage.getItem('dataNL') || '[]')
  ;

// init table
dataNL.forEach(row=>
  {
  let newRow = myTableTBody.insertRow()

  newRow.insertCell().textContent = row.no
  newRow.insertCell().textContent = row.inputNL
  newRow.insertCell().textContent = row.inputJK
  newRow.insertCell().textContent = row.inputNH
  newRow.insertCell().textContent = row.inputA
  newRow.insertCell().textContent = ''  
  })

myForm.onsubmit = e =>
  {
  e.preventDefault()  

// add entries into local storage :
  dataNL.push(Object.fromEntries(new FormData(myForm).entries()))
  localStorage.setItem('dataNL', JSON.stringify( dataNL ))

// insert new row 

  let newRow = myTableTBody.insertRow()

  newRow.insertCell().textContent = myForm.no.value
  newRow.insertCell().textContent = myForm.inputNL.value
  newRow.insertCell().textContent = myForm.inputJK.value
  newRow.insertCell().textContent = myForm.inputNH.value
  newRow.insertCell().textContent = myForm.inputA.value
  newRow.insertCell().textContent = ''                   // Action
  }

-> some help <-

Answer 2

首先：

1. 改变

 <form class="task-form" name="my-form" onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">

到

 <form class="task-form" name="my-form" autocomplete="off">

Js 代码是：

const 
  myForm = document.forms['my-form']  // form name pada tag html form

//.... 

myForm.onsubmit = e =>
  {
  e.preventDefault() 
  //...

1. 从下面的 sn-p 添加我的 CSS（已屏蔽）

如何删除本地存储数据？

no的管理有些不一致。
我做了一些其他的修复。 删除<table><TR> 有效...

请不要将getElementById 用于表单元素！
看看我是如何编写你的 validate() 函数的
关于这一点，请参阅我之前的帖子：Jun 30 at 13:06 和 Jun 14 '19 at 14:17

我和所有的程序员一样，一旦我开始了一个项目，我就不能半途而废。我希望这将帮助您更好地完成您的工作。

表格中转置的文本地址的显示有点头疼，有溢出问题；因此，正则表达式的想法至少可以删除不必要的白线 ...
所以，另见Single regex to remove empty lines and double spaces from multiline input

const 
  myForm  = document.forms['my-form']  // form name pada tag html form
, myTable = document.querySelector('#myTable')
, myTbody = document.querySelector('#myTable tbody')
, dataArr = JSON.parse(localStorage.getItem('dataArr') || '[]')
, rowsInfo =
    { last_no  : 0
    , noSelect : true
    , index    : 0
    , tRow     : null
    }
, addTableRow = row =>
    {
    rowsInfo.last_no = Math.max( rowsInfo.last_no, row.no )

    let newRow = myTbody.insertRow()
      newRow.insertCell().textContent = row.no 
      newRow.insertCell().textContent = row.inputNL
      newRow.insertCell().textContent = row.inputJK
      newRow.insertCell().textContent = row.inputNH
      newRow.insertCell().innerHTML = `<div>${row.inputA}</div>`
      newRow.insertCell().innerHTML = `<i class="fas fa-times"></i>`
    };
dataArr.forEach(addTableRow) // Tabel init
  ;
myForm.onsubmit = e =>
  {
  e.preventDefault() 
  if (validate())
    {
    if (rowsInfo.noSelect)
      {
      let newRow = Object.fromEntries(new FormData(myForm).entries())
      newRow.no  = ++rowsInfo.last_no

      dataArr.push(newRow)
      addTableRow (newRow) // Memasukkan Data pada Baris Baru
      } 
    else
      {
      let
        index = rowsInfo.index
      , eTR   = rowsInfo.tRow
        ;
      eTR.cells[1].textContent = dataArr[index].inputNL = myForm.inputNL.value 
      eTR.cells[2].textContent = dataArr[index].inputJK = myForm.inputJK.value 
      eTR.cells[3].textContent = dataArr[index].inputNH = myForm.inputNH.value 
      dataArr[index].inputA    = myForm.inputA.value 
      eTR.cells[4].innerHTML   = `<div>${myForm.inputA.value}</div>`

      eTR.classList.remove('selected')
      }
    localStorage.setItem('dataArr', JSON.stringify( dataArr )) // Menambahkan entri ke LocalStorage 
    resetForm()
    }
  }
function resetForm() // Function untuk Mereset Data yang sudah diSumbit di dalam Input
  {
  myForm.reset()
  rowsInfo.noSelect = true
  }
function validate()  // Function untuk Memvalidasi Data
  {
  myForm.inputNL.value = myForm.inputNL.value.trim()
  myForm.inputJK.value = myForm.inputJK.value.trim()
  myForm.inputNH.value = myForm.inputNH.value.trim()
  myForm.inputA.value  = myForm.inputA.value.replace(/^\s*$[\r\n]*|^[^\S\r\n]+|[^\S\r\n]+$|([^\S\r\n]){2,}/gm, '$1') 
  myForm.inputA.value  = myForm.inputA.value.replace(/\n*$/, '')  // remove final line break

  let isValid = 
    ( myForm.inputNL.value !== '' 
   && myForm.inputJK.value !== '' 
   && myForm.inputNH.value !== ''
   && myForm.inputA.value  !== '' 
    ) 
  if (!isValid) alert('Isi Semua Formnya dengan Benar!')
    ;
  return isValid
  }
myTbody.onclick = ({target}) =>
  {
  let
    eTR   = target.closest('tr')
  , rowNo = parseInt( eTR.cells[0].textContent )
  , index = dataArr.findIndex(x=>x.no===rowNo)
  , isDel = target.matches('i.fa-times, td:nth-of-type(6)')
    ;
  if (!eTR.classList.toggle('selected') && !isDel )
    {
    resetForm()
    }
  else 
    {
    myTbody.querySelectorAll('tr').forEach(tr=>tr.classList.toggle('selected', eTR===tr))
 
    rowsInfo.noSelect    = false
    rowsInfo.index       = index
    rowsInfo.tRow        = eTR
    myForm.no.value      = dataArr[index].no
    myForm.inputNL.value = dataArr[index].inputNL
    myForm.inputJK.value = dataArr[index].inputJK
    myForm.inputNH.value = dataArr[index].inputNH
    myForm.inputA.value  = dataArr[index].inputA
    
    if (isDel && confirm('Apa kamu yakin ingin Menghapus Data ini?'))
      {
      dataArr.splice(index, 1)
      myTable.deleteRow(eTR.rowIndex)
      localStorage.setItem('dataArr', JSON.stringify(dataArr))
      resetForm()
      rowsInfo.last_no = dataArr.reduce((mx,{no})=>Math.max(mx,no),0)
      } 
  } }

#myTable {
  table-layout : fixed;  /* one of the Boostrap always missing... */
  }
#myTable tbody tr.selected {
  background-color : darkblue;
  color            : whitesmoke;
  }
#myTable tbody tr:hover {
  background-color : lightblue; 
  cursor           : pointer; 
  }
#myTable tbody tr.selected:hover {
  background-color : #1c1ce0; 
  }
#myTable tbody td:nth-of-type(5) div { 
  max-height    : 1.2em;  /* no multilines displaying */
  white-space   : pre;
  overflow      : hidden;
  } 
#myTable th:nth-of-type(1), 
#myTable td:nth-of-type(1),
#myTable th:nth-of-type(6), 
#myTable td:nth-of-type(6) { 
  width      : 4em;
  text-align : center;
  }
#myTable tbody td:nth-of-type(6):hover { 
  color : red;
  }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" 
      crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" >

<!-- Registration Form -->
<div class="container w-50 mt-3 shadow p-3 mb-5 bg-white rounded">
  <div class="p-3">
      <h1 class="mb-4">Registration Form</h1>
        <form class="task-form" name="my-form" autocomplete="off">
          <input type="hidden" name="no" id="no" value=""> 
          <label for="inputNL" class="form-label">Nama Lengkap</label>
          <input type="text" id="inputNL" name="inputNL" class="form-control mb-2" placeholder="Nama Lengkap">
          <label for="inputJK"class="form-label">Jenis Kelamin</label>
          <select class="form-select mb-2" id="inputJK" name="inputJK">
            <option value="Pria">Pria</option>
            <option value="Wanita">Wanita</option>
          </select>            
          <label for="inputNH" class="form-label">No HP</label>
          <input type="rowsInfo.last_no" id="inputNH" name="inputNH" class="form-control mb-2" placeholder="No HP">
          <label for="inputA" class="form-label">Alamat</label>
          <textarea id="inputA" name="inputA" class="form-control mb-2" style="min-width: 100%" placeholder="Alamat"></textarea>
          <input type="submit" value="Submit" class="btn btn-primary btn-md my-3">
        </form>
  </div>
</div>
<!-- Table -->
<div class="container mt-3 shadow p-3 mb-5 bg-white rounded">
  <div class="p-3">
    <table class="table" id="myTable">
      <thead>
          <th scope="col">#</th>
          <th scope="col">Nama Lengkap</th>
          <th scope="col">Jenis Kelamin</th>
          <th scope="col">No HP</th>
          <th scope="col">Alamat</th>
          <th scope="col">Aksi</th>
      </thead>
      <tbody> </tbody>
    </table>
  </div>      
</div>

localStorage 对象被认为对 SO sn-p 不安全

PS：我只使用Whitesmiths style