将收藏夹按钮添加到 HTML 表格

Question

问题：我遇到了一个小问题。当我创建 2 个 html 文件(如不同类别的书籍(时出现问题，这些文件具有相同的代码，只是书籍名称不同。假设 Html 1 有 data-id 的 [Book A]、[Book B ]、[Book C]。html 2 有[Book C]、[BookD]、[BookE]、[BookF] 等。当我打开 Html 1 并添加 [BookA]，[BookB] 到 localstorage 并关闭文件并打开 html 2 并将 [BookC] 添加到 localstorage 时。当我再次打开html 1时[BookA]，[BookB]被清除，现在两个文件都只有[BookC]，

问题是当我打开html 2时，它没有[BookA]，[BookB]，我选择了[BookC]，然后本地存储重置并仅保存[BookC]。 你能帮我解决这个问题吗.提前致谢

我不知道一个问题允许多少次更新。如果这是错误的版主请原谅

编辑(旧(：能否告诉我 jquery 有哪些更改以使代码在下面的案例中工作。 因为在同一 tr 下添加多个"td"时代码不起作用 当我对 Unicode 字符有任何内容时也不起作用。 我只想将序列号保存到本地存储并通过识别它来检索

我怎样才能做到这一点：

当用户选择添加到收藏夹图像或类似按钮的内容时，它将变为黄色(添加到收藏夹(。并且喜欢的项目应该放在不喜欢的项目之上。该表将保存到本地存储。

这可以通过使用本地存储脚本或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>

Answer 1

以下是移动和保存的方法

HTML 必须是有效的(我必须修复您的</table>(

更新 要为每个表提供不同的本地存储条目，例如，您可以为表提供一个类和一个 ID，然后执行

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>

表的单独评级 - 不是我在表中添加了一个类和一个 ID

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

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

删除 .fav

中的任何一个图像

Answer 3

这就是你所追求的效果吗？然后你需要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>