javascript - adding favourite button to html table

Question

ISSUE: I got a small issue with this.Issue Happened when I created 2 html files (Like for different category of Books) with same code only difference in the name of books.Say the Html 1 has data-id's [Book A],[Book B ],[Book C]. and html 2 has [Book C],[BookD],[BookE],[BookF] etc. When I opened Html 1 & added [BookA],[BookB] to localstorage & closed the file and opened html 2 and added [BookC] to localstorage. when I opened html 1 again [BookA],[BookB] got cleared & now both files has only [BookC],

The Problem is when I opened html 2 and it has no [BookA],[BookB] & I selected [BookC] then localstorage reset and saves only [BookC] . Can you help me to fix this . Thanks in advance

I donot Know How many updates are allowed to single question.If This is wrong Moderators please forgive

EDIT (Old) :Can please tell me what changes to jquery for getting code work in below Case . becauses code doesn't work when adding multiple 'td's under same tr also doesnot work when i have anything on unicode characters. i want only serial code saved to localstorage and retreive by identifying it

How can I make this happen:

when user select add to the favourite image or something like a button, it becomes yellow-colored (added to favorites). And the favoured item should be placed above the unfavoured item. the table is saved to localStorage.

can this be achieved by using localStorage script or jquery?

    <table><tr>
    <td >ല്ലെങ്കിൽ (Eg For Book name in another lang )</td>
    <td  style="display:none" class="serial-code">book-dais</td>
    <td>
      <div class="fav">
        <img class="white-star" src="../files/images/unfav.png" />
        <img class="yellow-star hide" src="../files/images/fav.png" />
      </div>
    </td>
  </tr>
  <tr>
          <td >The chair by Jhon</td>

    <td  style="display:none" class="serial-code">book-jhon</td>
    <td>
      <div class="fav">
        <img class="white-star" src="../files/images/unfav.png" />
        <img class="yellow-star hide" src="../files/images/fav.png" />
      </div>
    </td>
  </tr>
  <tr>
          <td>The Lady by Maria</td>

    <td  style="display:none" class="serial-code">book-lady</td>
    <td>
      <div class="fav">
        <img class="white-star" src="../files/images/unfav.png" />
        <img class="yellow-star hide" src="../files/images/fav.png" />
      </div>
    </td>
  </tr>
</table>

标签： javascriptjqueryhtmlhtml-table

Answer 1

Here is how to move and save

The HTML has to be valid (I had to fix your </table>)

UPDATE To have different localStorage entries per table, you can for example give the table a class and an ID and do

localStorage.setItem(
  document.querySelector("table.bookTable").id+"favs",
  JSON.stringify(favs)
); 

Full example

$(function() {
  $('tr').click(function(e) {
    $(this).find('img.white-star').toggle();
    $(this).find('img.yellow-star').toggle();
    const $favs = $("tr").has('img.yellow-star:visible');
    $("table").prepend($favs)
    const favs = $favs.find("td").text().trim().split(/\s+/)
    //localStorage.setItem("favs",JSON.stringify(favs)); // uncomment this on server
  })
  let favs // = localStorage.getItem("favs"); // uncomment when on your server
  // favs = favs ? JSON.parse(favs) : []; // uncomment when on your server
  favs = favs ? JSON.parse(favs) : ["cat", "foo"]; // remove this after testing
  $.each(favs, function(i,fav) {
    $("table tr td:contains(" + fav + ")").each(function() {
      $(this).parent().trigger("click")
    });
  });
});

td {
  cursor: pointer;
}

img {
  height: 25px;
}

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>cat</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://cdn.clipart.email/9bfb21466fc07c2f2795fce51bb5ee4f_28-collection-of-star-clipart-transparent-background-high-_299-270.png" />
        <img class="yellow-star hide" src="https://cdn.clipart.email/d09d2061abdc8c1316827ecafedacf01_stars-clipart-on-transparent-background-clipartxtras_7628-7405.png" />
      </div>
    </td>
  </tr>
  <tr>
    <td>duck</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://cdn.clipart.email/9bfb21466fc07c2f2795fce51bb5ee4f_28-collection-of-star-clipart-transparent-background-high-_299-270.png" />
        <img class="yellow-star hide" src="https://cdn.clipart.email/d09d2061abdc8c1316827ecafedacf01_stars-clipart-on-transparent-background-clipartxtras_7628-7405.png" />
      </div>
    </td>
  </tr>
  <tr>
    <td>goose</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://cdn.clipart.email/9bfb21466fc07c2f2795fce51bb5ee4f_28-collection-of-star-clipart-transparent-background-high-_299-270.png" />
        <img class="yellow-star hide" src="https://cdn.clipart.email/d09d2061abdc8c1316827ecafedacf01_stars-clipart-on-transparent-background-clipartxtras_7628-7405.png" />
      </div>
    </td>
  </tr>
  <tr>
    <td>foo</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://cdn.clipart.email/9bfb21466fc07c2f2795fce51bb5ee4f_28-collection-of-star-clipart-transparent-background-high-_299-270.png" />
        <img class="yellow-star hide" src="https://cdn.clipart.email/d09d2061abdc8c1316827ecafedacf01_stars-clipart-on-transparent-background-clipartxtras_7628-7405.png" />
      </div>
    </td>
  </tr>
  <tr>
    <td>bar</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://cdn.clipart.email/9bfb21466fc07c2f2795fce51bb5ee4f_28-collection-of-star-clipart-transparent-background-high-_299-270.png" />
        <img class="yellow-star hide" src="https://cdn.clipart.email/d09d2061abdc8c1316827ecafedacf01_stars-clipart-on-transparent-background-clipartxtras_7628-7405.png" />
      </div>
    </td>
  </tr>
</table>

With your new HTML

$(function() {
  $('tr').click(function(e) {
    $(this).find('img.white-star').toggle();
    $(this).find('img.yellow-star').toggle();
    const $favs = $("tr").has('img.yellow-star:visible');
    $("table").prepend($favs)
    const favs = $favs.find("td:first").map((i,fav) => $(fav).data("id")).get();
    //localStorage.setItem("favs",JSON.stringify(favs)); // uncomment this on server
  })
  let favs // = localStorage.getItem("favs"); // uncomment when on your server
  // favs = favs ? JSON.parse(favs) : []; // uncomment when on your server
  favs = favs ? JSON.parse(favs) : ["Book A","Book C"]; // remove this after testing
  $.each(favs, function(i, fav) {
    $("table tr td[data-id='"+fav+"']").each(function() {
      $(this).parent().trigger("click")
    });
  });
});

td {
  cursor: pointer;
}

img {
  height: 25px;
}

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td data-id="Book A">ല്ലെങ്കിൽ (Eg For Book name in another lang )</td>
    <td style="display:none" class="serial-code">book-dais</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
        <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
      </div>
    </td>
  </tr>
  <tr>
    <td data-id="Book B">The chair by Jhon</td>
    <td style="display:none" class="serial-code">book-jhon</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
        <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
      </div>
    </td>
  </tr>
  <tr>
    <td> ലോഡ് </td>
    <td data-id="Book C" style="display:none" class="serial-code">book-lady</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
        <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
      </div>
    </td>
  </tr>
</table>

Separate ratings for tables - not I added a class and an ID to the table

$(function() {
  $('tr').click(function(e) {
    const $parentTable = $(this).closest("table"); 
    $(this).find('img.white-star').toggle();
    $(this).find('img.yellow-star').toggle();
    const $favs = $("tr").has('img.yellow-star:visible');
    $parentTable.prepend($favs)
    const favs = $favs.find("td:first").map((i,fav) => $(fav).data("id")).get();
    //localStorage.setItem($parentTable.attr("id")+"favs",JSON.stringify(favs)); // uncomment this on server
  })
  let favs // = localStorage.getItem($(".ratingTable").attr("id")+"favs"); // uncomment when on your server
  // favs = favs ? JSON.parse(favs) : []; // uncomment when on your server
  favs = favs ? JSON.parse(favs) : ["Book A","Book C"]; // remove this after testing
  $.each(favs, function(i, fav) {
    $("table tr td[data-id='"+fav+"']").each(function() {
      $(this).parent().trigger("click")
    });
  });
});

td {
  cursor: pointer;
}

img {
  height: 25px;
}

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="ratingTable" id="table1">
  <tr>
    <td data-id="Book A">ല്ലെങ്കിൽ (Eg For Book name in another lang )</td>
    <td style="display:none" class="serial-code">book-dais</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
        <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
      </div>
    </td>
  </tr>
  <tr>
    <td data-id="Book B">The chair by Jhon</td>
    <td style="display:none" class="serial-code">book-jhon</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
        <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
      </div>
    </td>
  </tr>
  <tr>
    <td> ലോഡ് </td>
    <td data-id="Book C" style="display:none" class="serial-code">book-lady</td>
    <td>
      <div class="fav">
        <img class="white-star" src="https://i.postimg.cc/g0b9JG0w/unfav.png" />
        <img class="yellow-star hide" src="https://i.postimg.cc/QN1T9bSH/fav.png" />
      </div>
    </td>
  </tr>
</table>