Как сохранить таблицу html

190
27 марта 2021, 09:20

Сделал таблицу в html (Имя,код паспорта,номер телефона, сумма, "не погашено/погашено") Суть такова что надо чтоб при нажатие на имя вылезало окошко, с "погасить?" при нажатие ок, текст в последней ячейке строки меняется на "погашено" это я сделал. Но при обновлении страницы все данные слетают. Не могу не как реализовать сохранения хотя пытался через localStorage но я в нём вообще не бум бум.

<html>
<head>
<title>Кредиты </title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
  <div  class="clearfix">
<div id="container">
<div id="header">
    <h  align="left">Служебный код:</h><h id="r"></h>
  <h1  align="center">Меню кредитора</h1>
 <div class="serch">
 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Поиск.." title="Введите имя">
 </div>
<table id="_myTable" class="tablica"  align="center">
  <th>ФИО</th>
  <th>Код паспорта</th>
  <th>Номер телефона</th>
  <th>Сума</th>
  <th>Статус</th>
    <tbody>
      <tr>
        <td>Емельянов Семен Федорович</td>
        <td>906170903</td>
        <td>+38(097)534-41-45371</td>
        <td>345 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Етухов Орест Мелорович</td>
        <td>829973997</td>
        <td>+38(097)534-41-45371</td>
        <td>7000 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Дроздов Оскар Михаилович</td>
        <td>045271762</td>
        <td>+38(097)910-56-88110</td>
        <td>1000 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Ефимов Фрол Витальевич</td>
        <td>255710705</td>
        <td>+38(097)851-83-87932</td>
        <td>200 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Антонов Касьян Вячеславович</td>
        <td>607263728</td>
        <td>+38(097)773-22-79478</td>
        <td>100 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Кузнецов Вольдемар Артёмович</td>
        <td>291346172</td>
        <td>+38(097)743-62-47225</td>
        <td>800 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Филиппов Ибрагил Александрович</td>
        <td>874756345</td>
        <td>+38(097)441-21-15443</td>
        <td>900 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Пахомов Яков Семенович</td>
        <td>815401771</td>
        <td>+38(097)754-54-92350</td>
        <td>2500 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Миронов Вилли Ярославович</td>
        <td>426823330</td>
        <td>+38(097)869-33-25909</td>
        <td>4500 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Яковлев Парамон Никитевич</td>
        <td>862986579</td>
        <td>+38(097)225-47-08116</td>
        <td>100 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Иванков Адам Авдеевич</td>
        <td>781931117</td>
        <td>+38(097)511-53-40428</td>
        <td>350 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Никифоров Афанасий Геласьевич</td>
        <td>268904042</td>
        <td>+38(097)224-58-45888</td>
        <td>3500 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Устинов Рубен Давидович</td>
        <td>780312808</td>
        <td>+38(097)428-41-95761</td>
        <td>1000 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Киселёв Мирослав Ростиславович</td>
        <td>201935118</td>
        <td>+38(097)762-27-75687</td>
        <td>4000 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Фомин Василий Валерьевич</td>
        <td>921105431</td>
        <td>+38(097)326-78-46650</td>
        <td>2000 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Гущин Елисей Тимофеевич</td>
        <td>610390795</td>
        <td>+38(097)341-20-89276</td>
        <td>450 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Морозов Арсен Аристархович</td>
        <td>409729583</td>
        <td>+38(097)996-64-35218</td>
        <td>1300 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Евдокимов Владимир Гордеевич</td>
        <td>547297372</td>
        <td>+38(097)853-21-07291</td>
        <td>10000 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Филиппов Аркадий Альбертович</td>
        <td>369634473</td>
        <td>+38(097)048-93-06006</td>
        <td>2000 uah</td>
        <td>не погашено</td>
    </tr>
    <tr>
        <td>Мышкин Демьян Валерьевич</td>
        <td>266605642</td>
        <td>+38(097)734-08-61619</td>
        <td>1300 uah</td>
        <td>не погашено</td>
    </tr>
  </tbody>
</table>
</div>
</div>
</div>

JS

<script> 
var min=999999; 
var max=10000000; 
document.getElementById("r").textContent=min + Math.floor(Math.random() * (max - min + 1)); 
 
var table = document.getElementById('_myTable'); 
for(var i = 1; i < table.rows.length; i++) 
               { 
                   table.rows[i].onclick = function() 
                   { 
 
                     if (confirm("Погасить?")) { 
                         txt = "Погашено"; 
						 localStorage.setItem(i,"Погашено"); 
						 let value = localStorage.getItem(i); 
						 console.log(value) 
                       } 
					   else{ 
					   txt = "не погашено"; 
					     localStorage.setItem(i,"не погашено"); 
						 let value = localStorage.getItem(i); 
						 console.log(value) 
					   } 
                        this.cells[4].innerHTML=txt; 
                   }; 
               } 
			    
function myFunction() { 
  var input, filter, table, tr, td, k, txtValue; 
  input = document.getElementById("myInput"); 
  filter = input.value.toUpperCase(); 
  table = document.getElementById("_myTable"); 
  tr = table.getElementsByTagName("tr"); 
  for (k = 0; k < tr.length; k++) { 
    td = tr[k].getElementsByTagName("td")[0]; 
    if (td) { 
      txtValue = td.textContent || td.innerText; 
      if (txtValue.toUpperCase().indexOf(filter) > -1) { 
        tr[k].style.display = ""; 
      } else { 
        tr[k].style.display = "none"; 
      } 
    }        
  } 
} 
</script>
#container{ 
 
} 
body{background-image: url(images/paper.jpg);} 
#header{ 
 
} 
.tablica{ 
    background-color: white; 
    border-spacing: 30px; 
    border: 1px solid grey; 
    text-align: center; 
} 
.tablica tr td{ 
	padding: 5px 10px; 
   } 
   td:hover{background-color:green;cursor: pointer} 
   th { 
       background: #afd792; /* Цвет фона */ 
       color: #333;  /* Цвет текста */ 
      } 
     tr:hover { 
       background: green; /* Цвет фона при наведении */ 
       color: #fff; /* Цвет текста при наведении */ 
      } 
.serch{ 
	margin-top:2%; 
	padding-left:28%; 
}
<!DOCTYPE> 
<html> 
<head> 
<title>Кредиты </title> 
<link rel="stylesheet" href="style.css" type="text/css" /> 
</head> 
<body> 
  <div  class="clearfix"> 
<div id="container"> 
<div id="header"> 
    <h  align="left">Служебный код:</h><h id="r"></h> 
  <h1  align="center">Меню кредитора</h1> 
 <div class="serch"> 
 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Поиск.." title="Введите имя"> 
 </div> 
<table id="_myTable" class="tablica"  align="center"> 
  <th>ФИО</th> 
  <th>Код паспорта</th> 
  <th>Номер телефона</th> 
  <th>Сума</th> 
  <th>Статус</th> 
    <tbody> 
      <tr> 
        <td>Емельянов Семен Федорович</td> 
        <td>906170903</td> 
        <td>+38(097)534-41-45371</td> 
        <td>345 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Етухов Орест Мелорович</td> 
        <td>829973997</td> 
        <td>+38(097)534-41-45371</td> 
        <td>7000 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Дроздов Оскар Михаилович</td> 
        <td>045271762</td> 
        <td>+38(097)910-56-88110</td> 
        <td>1000 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Ефимов Фрол Витальевич</td> 
        <td>255710705</td> 
        <td>+38(097)851-83-87932</td> 
        <td>200 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Антонов Касьян Вячеславович</td> 
        <td>607263728</td> 
        <td>+38(097)773-22-79478</td> 
        <td>100 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Кузнецов Вольдемар Артёмович</td> 
        <td>291346172</td> 
        <td>+38(097)743-62-47225</td> 
        <td>800 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Филиппов Ибрагил Александрович</td> 
        <td>874756345</td> 
        <td>+38(097)441-21-15443</td> 
        <td>900 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Пахомов Яков Семенович</td> 
        <td>815401771</td> 
        <td>+38(097)754-54-92350</td> 
        <td>2500 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Миронов Вилли Ярославович</td> 
        <td>426823330</td> 
        <td>+38(097)869-33-25909</td> 
        <td>4500 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Яковлев Парамон Никитевич</td> 
        <td>862986579</td> 
        <td>+38(097)225-47-08116</td> 
        <td>100 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Иванков Адам Авдеевич</td> 
        <td>781931117</td> 
        <td>+38(097)511-53-40428</td> 
        <td>350 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Никифоров Афанасий Геласьевич</td> 
        <td>268904042</td> 
        <td>+38(097)224-58-45888</td> 
        <td>3500 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Устинов Рубен Давидович</td> 
        <td>780312808</td> 
        <td>+38(097)428-41-95761</td> 
        <td>1000 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Киселёв Мирослав Ростиславович</td> 
        <td>201935118</td> 
        <td>+38(097)762-27-75687</td> 
        <td>4000 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Фомин Василий Валерьевич</td> 
        <td>921105431</td> 
        <td>+38(097)326-78-46650</td> 
        <td>2000 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Гущин Елисей Тимофеевич</td> 
        <td>610390795</td> 
        <td>+38(097)341-20-89276</td> 
        <td>450 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Морозов Арсен Аристархович</td> 
        <td>409729583</td> 
        <td>+38(097)996-64-35218</td> 
        <td>1300 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Евдокимов Владимир Гордеевич</td> 
        <td>547297372</td> 
        <td>+38(097)853-21-07291</td> 
        <td>10000 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Филиппов Аркадий Альбертович</td> 
        <td>369634473</td> 
        <td>+38(097)048-93-06006</td> 
        <td>2000 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
    <tr> 
        <td>Мышкин Демьян Валерьевич</td> 
        <td>266605642</td> 
        <td>+38(097)734-08-61619</td> 
        <td>1300 uah</td> 
        <td>не погашено</td> 
 
    </tr> 
  </tbody> 
</table> 
</div> 
</div> 
</div> 
</tbody></html>

Answer 1

var min = 999999; 
var max = 10000000; 
document.getElementById("r").textContent = min + Math.floor(Math.random() * (max - min + 1)); 
 
var table = document.getElementById('_myTable'); 
for (let i = 1; i < table.rows.length; i++) { 
  if (localStorage.getItem(i)) { 
    table.rows[i].cells[4].innerHTML = localStorage.getItem(i); 
  } 
  table.rows[i].onclick = function() { 
 
    let txt; 
    if (this.cells[4].textContent != 'Погашено') { 
 
      if (confirm("Погасить?")) { 
        txt = "Погашено"; 
        localStorage.setItem(i, "Погашено"); 
        let value = localStorage.getItem(i); 
        console.log(value) 
      } else { 
        txt = "не погашено"; 
        localStorage.setItem(i, "не погашено"); 
        let value = localStorage.getItem(i); 
        console.log(value) 
      } 
 
      this.cells[4].innerHTML = txt; 
    } 
 
 
  }; 
 
} 
 
function myFunction() { 
  var input, filter, table, tr, td, k, txtValue; 
  input = document.getElementById("myInput"); 
  filter = input.value.toUpperCase(); 
  table = document.getElementById("_myTable"); 
  tr = table.getElementsByTagName("tr"); 
  for (k = 0; k < tr.length; k++) { 
    td = tr[k].getElementsByTagName("td")[0]; 
    if (td) { 
      txtValue = td.textContent || td.innerText; 
      if (txtValue.toUpperCase().indexOf(filter) > -1) { 
        tr[k].style.display = ""; 
      } else { 
        tr[k].style.display = "none"; 
      } 
    } 
  } 
}
#container {} 
 
body { 
  background-image: url(images/paper.jpg); 
} 
 
#header {} 
 
.tablica { 
  background-color: white; 
  border-spacing: 30px; 
  border: 1px solid grey; 
  text-align: center; 
} 
 
.tablica tr td { 
  padding: 5px 10px; 
} 
 
td:hover { 
  background-color: green; 
  cursor: pointer 
} 
 
th { 
  background: #afd792; 
  /* Цвет фона */ 
  color: #333; 
  /* Цвет текста */ 
} 
 
tr:hover { 
  background: green; 
  /* Цвет фона при наведении */ 
  color: #fff; 
  /* Цвет текста при наведении */ 
} 
 
.serch { 
  margin-top: 2%; 
  padding-left: 28%; 
}
<!DOCTYPE> 
<html> 
 
<head> 
  <title>Кредиты </title> 
  <link rel="stylesheet" href="style.css" type="text/css" /> 
</head> 
 
<body> 
  <div class="clearfix"> 
    <div id="container"> 
      <div id="header"> 
        <h align="left">Служебный код:</h> 
        <h id="r"></h> 
        <h1 align="center">Меню кредитора</h1> 
        <div class="serch"> 
          <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Поиск.." title="Введите имя"> 
        </div> 
        <table id="_myTable" class="tablica" align="center"> 
          <th>ФИО</th> 
          <th>Код паспорта</th> 
          <th>Номер телефона</th> 
          <th>Сума</th> 
          <th>Статус</th> 
          <tbody> 
            <tr> 
              <td>Емельянов Семен Федорович</td> 
              <td>906170903</td> 
              <td>+38(097)534-41-45371</td> 
              <td>345 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Етухов Орест Мелорович</td> 
              <td>829973997</td> 
              <td>+38(097)534-41-45371</td> 
              <td>7000 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Дроздов Оскар Михаилович</td> 
              <td>045271762</td> 
              <td>+38(097)910-56-88110</td> 
              <td>1000 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Ефимов Фрол Витальевич</td> 
              <td>255710705</td> 
              <td>+38(097)851-83-87932</td> 
              <td>200 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Антонов Касьян Вячеславович</td> 
              <td>607263728</td> 
              <td>+38(097)773-22-79478</td> 
              <td>100 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Кузнецов Вольдемар Артёмович</td> 
              <td>291346172</td> 
              <td>+38(097)743-62-47225</td> 
              <td>800 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Филиппов Ибрагил Александрович</td> 
              <td>874756345</td> 
              <td>+38(097)441-21-15443</td> 
              <td>900 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Пахомов Яков Семенович</td> 
              <td>815401771</td> 
              <td>+38(097)754-54-92350</td> 
              <td>2500 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Миронов Вилли Ярославович</td> 
              <td>426823330</td> 
              <td>+38(097)869-33-25909</td> 
              <td>4500 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Яковлев Парамон Никитевич</td> 
              <td>862986579</td> 
              <td>+38(097)225-47-08116</td> 
              <td>100 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Иванков Адам Авдеевич</td> 
              <td>781931117</td> 
              <td>+38(097)511-53-40428</td> 
              <td>350 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Никифоров Афанасий Геласьевич</td> 
              <td>268904042</td> 
              <td>+38(097)224-58-45888</td> 
              <td>3500 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Устинов Рубен Давидович</td> 
              <td>780312808</td> 
              <td>+38(097)428-41-95761</td> 
              <td>1000 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Киселёв Мирослав Ростиславович</td> 
              <td>201935118</td> 
              <td>+38(097)762-27-75687</td> 
              <td>4000 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Фомин Василий Валерьевич</td> 
              <td>921105431</td> 
              <td>+38(097)326-78-46650</td> 
              <td>2000 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Гущин Елисей Тимофеевич</td> 
              <td>610390795</td> 
              <td>+38(097)341-20-89276</td> 
              <td>450 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Морозов Арсен Аристархович</td> 
              <td>409729583</td> 
              <td>+38(097)996-64-35218</td> 
              <td>1300 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Евдокимов Владимир Гордеевич</td> 
              <td>547297372</td> 
              <td>+38(097)853-21-07291</td> 
              <td>10000 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Филиппов Аркадий Альбертович</td> 
              <td>369634473</td> 
              <td>+38(097)048-93-06006</td> 
              <td>2000 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
            <tr> 
              <td>Мышкин Демьян Валерьевич</td> 
              <td>266605642</td> 
              <td>+38(097)734-08-61619</td> 
              <td>1300 uah</td> 
              <td>не погашено</td> 
 
            </tr> 
          </tbody> 
        </table> 
      </div> 
    </div> 
  </div> 
  </tbody> 
 
</html>

Подшаманил ваш код.

Когда вы с помощью цикла вешаете обработчик на каждую строку, используйте локальную переменную let. Т.к. при использовании var обработчик будет повешен только на последний 21(не существующий у вас) элемент. Вообще, при наличии однотипных действий вместо цикла лучше использовать делегирование.

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте hersones.com.ua
ТОП-10
READ ALSO
Двойной клик при использовании .click в JQuery
javascript

Двойной клик при использовании .click в JQuery

Есть элемент label с классом radioContainer, при клике на него должен раскрываться список selectmenu с классом meal, дело в том, что при клике происходить двойное...

 123
slick слайдер, слайд по клику
javascript

slick слайдер, слайд по клику

 106
Обход дерева dropdown menu
javascript

Обход дерева dropdown menu

Есть стандартное генерируемое меню типа dropdown, допустим на 3 уровня

 135
Почему не работает валидация номера телефона?
javascript

Почему не работает валидация номера телефона?

Ситуация следующаяВалидация номера телефона работает не до конца

 142