[ANSWERED] javascript – adding favourite button to html table

Question 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>

Question 2

<script>

    $(document).ready(function()
    {

        $(".fav").click(function()
        {
            if($(this).children("img").prop("src")=="unfav.png")
            {
                $(this).children("img").prop("src", "fav.png");
            }
            else
            {
                $(this).children("img").prop("src", "unfav.png");
            }
        });

    });

</script>

Remove any one image in .fav < div >

Question 3

Is this the effect you are after? Then you need to toggle() the stars on click.
I used jQuery for the ease of demonstration. It can easily be translated into vanilla JS.

var myVars = {
  'cat': false,
  'duck': false,
  'goose': false,
  'foo': false,
  'bar': false
};
localStorage.setItem('myVars', JSON.stringify(myVars));
$('tr').click(function(e) {
	$(this).find('img.white-star').toggle();
	$(this).find('img.yellow-star').toggle();
  var name = $(this).attr('id');
  var status = $(this).find('img.yellow-star').is(':visible');
  changeMyVar(name, status);
  moveToTop(name);
});

function changeMyVar(name, status) {
  var tempMyVars = JSON.parse(localStorage.getItem('myVars'));
  tempMyVars[name] = status;
  localStorage.setItem('myVars', JSON.stringify(tempMyVars));
  console.log(localStorage.getItem('myVars'));
}

function moveToTop(name) {
  var thisTr = $('#vars_table').find('tr#'+name);
  $('#vars_table').find('tr#'+name).remove();
  $('#vars_table').prepend(thisTr);
}

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 id="vars_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>

Question 4

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>

Bollate

[ANSWERED] javascript – adding favourite button to html table

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

Comments

Comment posted by help center

Comment posted by David Beckam

Comment posted by mplungjan

Comment posted by David Beckam

Comment posted by moved to chat

Comment posted by David Beckam

Comment posted by Aydin4ik

Comment posted by Aydin4ik

By

Related Post

[ANSWERED] javascript – How to handle repeating values in JQuery

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

[ANSWERED] html – How to include a clickable image behind a link

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate