добавление любимой кнопки в таблицу html - PullRequest
Новая
       5

добавление любимой кнопки в таблицу html

0 голосов
/ 19 января 2020

ПРОБЛЕМА. У меня возникла небольшая проблема с этим. Проблема произошла, когда я создал 2 html файла (как для другой категории книг) с одинаковым кодом только разницей в названии книг. Скажем, Html 1 имеет данные -идс [Книга A], [Книга B], [Книга C] . и html 2 имеет [Книга C] , [BookD], [BookE], [BookF] и т.д. c. Когда я открыл Html 1 и добавил [BookA], [BookB] в локальное хранилище, закрыл файл, открыл html 2 и добавил [BookC] в локальное хранилище. когда я снова открыл html 1 [BookA], [BookB] был очищен, и теперь оба файла имеют только [BookC],

Проблема в том, что когда я открыл html 2, и у него нет [BookA] , [BookB] & I выбрал [BookC], затем сброс локального хранилища и сохраняет только [BookC]. Можете ли вы помочь мне исправить это. Заранее спасибо

Я не знаю, сколько обновлений разрешено для одного вопроса. Если это неправильно Модераторы, пожалуйста, прости

РЕДАКТИРОВАТЬ (Старый): Пожалуйста, скажите, какие изменения для jquery для Получение кода работает в нижнем случае. потому что код не работает, когда добавление нескольких 'td под одним и тем же tr также не работает, когда у меня есть что-нибудь на символах юникода. я хочу, чтобы только серийный код сохранялся в localalstorage и получал его, идентифицируя его

Как я могу это сделать:

, когда пользователь выбирает добавить к избранному изображению или что-то вроде кнопки, это становится желтым (добавляется в избранное). И любимый предмет должен быть помещен над любимым предметом. таблица сохраняется в localStorage.

это можно сделать с помощью сценария localStorage или 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>

Ответы [ 3 ]

1 голос
/ 20 января 2020

Вот как переместить и сохранить

HTML должен быть действительным (я должен был исправить ваш </table>)

ОБНОВЛЕНИЕ Чтобы иметь разные записи localStorage для каждой таблицы, вы можете, например, дать таблице класс и идентификатор и сделать 

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

Полный пример 

$(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>

С вашим новым 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>

Отдельные рейтинги для таблиц - не я добавил класс и идентификатор в таблицу 

$(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>
0 голосов
/ 20 января 2020

Это тот эффект, который вам нужен? Тогда вам нужно toggle() звездочек на click. Я использовал jQuery для простоты демонстрации. Его легко перевести на ваниль 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>
0 голосов
/ 20 января 2020 
<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>

Удалить одно изображение в .fav

...