LocalStorage Settitem pour chaque bloc de

J'ai cette table contentieuse sur mon site Web. XXX

Je souhaite enregistrer chaque bloc avec ID sur localStorage. Je sais que je peux utiliser localstorage.settitem ("p1d1", $ ('# p1d1'). Texte ()); pour les sauvegarder, mais y a-t-il un meilleur moyen de sauvegarder tous ces blocs sans Aller comme xxx

à travers le tout? Je dois appeler chacun d'eux par leur identifiant plus tard.

merci.

javascript jquery

---

4 commentaires

Sélectionnez tout le TDS et la boucle. On dirait que des déchets d'écrire chacun individuellement dans localStorage

---

Vous réalisez que cela ne sera visible que pour l'utilisateur / navigateur actuel ......

---

Si vous voulez modifier votre structure JSON, vous pouvez les classer dans un objet. Quelque chose comme localtstorage.settem (racine: {"p1d1", $ ('# p1d1'). Texte (), "P2D1", $ ('# p2d1'). Texte (), "P3D1", $ ('# P3D1 ').texte()})

---

@epascarello c'est ce que je voulais faire! Merci de l'avoir souligné

---

3 Réponses :

---

0
votes

Je recommanderais d'ajouter une classe à chaque cellule: xxx

puis fais quelque chose dans les lignes des suivantes: xxx

vous Pourrait faire d'autres choses avec le sélecteur afin que vous n'ayez pas besoin d'ajouter la classe à chaque cellule, mais c'est l'option la plus élémentaire ...

une autre est une augmentation du regex sur les identifiants de cellules ... mais ce serait assez douloureux

---

0 commentaires

---

2
votes

Vous pouvez utiliser document.queryselectorall ('td [id ^ = p]') code> Pour sélectionner tous les td code> qui a id code> que startswith p code>.

p>

<table>
  <tr class="top">
    <th></th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th class="wed">Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Saturday</th>
  </tr>
  <tr>
    <td class="noedit" colspan="3"></td>
    <td class="noedit" id="block-b">Meeting</td>
    <td class="noedit" colspan="3"></td>
  </tr>
  <tr>
    <th>Period 1</th>
    <td id="p1d1" tabindex=1>text of p1d1</td>
    <td id="p1d2" tabindex=2>text of p1d2</td>
    <td id="p1d3" tabindex=3>text of p1d3</td>
    <td id="p1d4" tabindex=4>text of p1d4</td>
    <td id="p1d5" tabindex=5>text of p1d5</td>
    <td id="p1d6" tabindex=6>text of p1d6</td>
  </tr>
  <tr>
    <th>Period 2</th>
    <td id="p2d1"></td>
    <td id="p2d2"></td>
    <td id="p2d3"></td>
    <td id="p2d4"></td>
    <td id="p2d5"></td>
    <td id="p2d6"></td>
  </tr>
  <tr>
    <th></th>
    <td class="noedit">Chapel</td>
    <td class="noedit">Meeting or Advisory</td>
    <td class="noedit">Advisory</td>
    <td class="noedit">Class Meeting</td>
    <td class="noedit">or Advisory</td>
    <td class="noedit">Break</td>
  </tr>
  <tr>
    <th>Period 3</th>
    <td id="p3d1"></td>
    <td id="p3d2"></td>
    <td id="p3d3"></td>
    <td id="p3d4"></td>
    <td id="p3d5"></td>
    <td id="p3d6"></td>
  </tr>
  <tr>
    <th>Period 4</th>
    <td id="p4d1"></td>
    <td id="p4d2"></td>
    <td id="p4d3"></td>
    <td id="p4d4"></td>
    <td id="p4d5"></td>
    <td id="p4d6"></td>
  </tr>
  <tr>
    <th>Period 5a</th>
    <td id="p5ad1"></td>
    <td id="p5ad2"></td>
    <td class="noedit" rowspan="4"></td>
    <td id="p5ad4"></td>
    <td id="p5ad5"></td>
  </tr>
  <tr>
    <th>Period 5b</th>
    <td id="p5bd1"></td>
    <td id="p5bd2"></td>
    <td id="p5bd4"></td>
    <td id="p5bd5"></td>
  </tr>
  <tr>
    <th>Period 6</th>
    <td id="p6d1"></td>
    <td id="p6d2"></td>
    <td id="p6d4"></td>
    <td id="p6d5"></td>
  </tr>
  <tr>
    <th>Period 7</th>
    <td id="p7d1"></td>
    <td id="p7d2"></td>
    <td id="p7d4"></td>
    <td id="p7d5"></td>
  </tr>
</table>

---

0 commentaires

---

1
votes

Personnellement, je le stockerais dans une seule touche au lieu de tonnes de clés. La déclaration simple de réduction peut vous laisser rassembler toutes les données.

p>

<table>
        <tr class="top">
          <th></th>
          <th>Monday</th>
          <th>Tuesday</th>
          <th class="wed">Wednesday</th>
          <th>Thursday</th>
          <th>Friday</th>
          <th>Saturday</th>
        </tr>
        <tr>
          <td class="noedit" colspan="3"></td>
          <td class="noedit" id="block-b">Meeting</td>
          <td class="noedit" colspan="3"></td>
        </tr>
        <tr>
          <th>Period 1</th>
          <td id="p1d1" tabindex=1></td>
          <td id="p1d2" tabindex=2></td>
          <td id="p1d3" tabindex=3></td>
          <td id="p1d4" tabindex=4></td>
          <td id="p1d5" tabindex=5></td>
          <td id="p1d6" tabindex=6></td>
        </tr>
        <tr>
          <th>Period 2</th>
          <td id="p2d1"></td>
          <td id="p2d2"></td>
          <td id="p2d3"></td>
          <td id="p2d4"></td>
          <td id="p2d5"></td>
          <td id="p2d6"></td>
        </tr>
        <tr>
          <th></th>
          <td class="noedit">Chapel</td>
          <td class="noedit">Meeting or Advisory</td>
          <td class="noedit">Advisory</td>
          <td class="noedit">Class Meeting</td>
          <td class="noedit">or Advisory</td>
          <td class="noedit">Break</td>
        </tr>
        <tr>
          <th>Period 3</th>
          <td id="p3d1"></td>
          <td id="p3d2"></td>
          <td id="p3d3"></td>
          <td id="p3d4"></td>
          <td id="p3d5"></td>
          <td id="p3d6"></td>
        </tr>
        <tr>
          <th>Period 4</th>
          <td id="p4d1"></td>
          <td id="p4d2"></td>
          <td id="p4d3"></td>
          <td id="p4d4"></td>
          <td id="p4d5"></td>
          <td id="p4d6"></td>
        </tr>
        <tr>
          <th>Period 5a</th>
          <td id="p5ad1"></td>
          <td id="p5ad2"></td>
          <td class="noedit" rowspan="4"></td>
          <td id="p5ad4"></td>
          <td id="p5ad5"></td>
        </tr>
        <tr>
          <th>Period 5b</th>
          <td id="p5bd1"></td>
          <td id="p5bd2"></td>
          <td id="p5bd4"></td>
          <td id="p5bd5"></td>
        </tr>
        <tr>
          <th>Period 6</th>
          <td id="p6d1"></td>
          <td id="p6d2"></td>
          <td id="p6d4"></td>
          <td id="p6d5"></td>
        </tr>
        <tr>
          <th>Period 7</th>
          <td id="p7d1"></td>
          <td id="p7d2"></td>
          <td id="p7d4"></td>
          <td id="p7d5"></td>
        </tr>
      </table>

---

0 commentaires

---

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"

---

Interaction profonde avec break and catch

---

Utilisation de node.js comment renommer tous les fichiers d'un dossier

---

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO

---