本文档旨在解决在动态生成的HTML表格中实现星级评分时遇到的问题，重点讲解如何确保每个表格行中的星级评分组件独立工作，互不影响。通过修改HTML元素的id和name属性，使每个评分组件具有唯一标识符，从而实现独立评分功能。
问题分析
在动态生成的HTML表格中，如果每个表格行中的星级评分组件的 id 和 name 属性都相同，那么当用户在某一行进行评分时，会影响到其他行的评分状态。这是因为浏览器无法区分这些具有相同 id 和 name 属性的元素，导致操作行为互相干扰。
解决方案：确保ID和Name属性的唯一性
为了解决这个问题，我们需要确保每个表格行中的星级评分组件的 id 和 name 属性都是唯一的。一种常见的做法是将事件名称（或者其他能够唯一标识每一行的属性）添加到 id 和 name 属性中，从而区分不同的评分组件。
代码示例
以下是如何修改JavaScript代码，以确保每个评分组件的 id 和 name 属性都是唯一的：
立即学习“前端免费学习笔记（深入）”；
$(document).ready(function () { function addData() { var eventname = $("#eventname").val(); var eventdate = $("#eventdate").val(); var eventloc = $("#eventloc").val(); var eventauthor = $("#eventauthor").val(); var eventdesc = $("#eventdesc").val(); if (eventname.trim() === '' || eventdate.trim() === '' || eventloc.trim() === '' || eventauthor.trim() === '' || eventdesc.trim() === '') { alert("Bitte füllen Sie alle Felder aus"); return; } if (!isValidDate(eventdate)) { alert("Datum muss folgendem Format entsprechen: dd.mm.yyyy ein"); return; } // Validierung und Hinzufügen zur Tabelle $(".table tbody tr").last().after( '' + '' + eventname + ' ' + '' + eventdate + ' ' + '' + eventloc + ' ' + '' + eventdesc + ' ' + '' + eventauthor + ' ' + ' ' ); function isValidDate(dateString) { var regex = /^d{2}.d{2}.d{4}$/; return regex.test(dateString); } } // Eventlistener für den Button $('#addData').click(addData); $('.table').on('click', '.like-button', function () { $(this).toggleClass('liked'); if ($(this).hasClass('liked')) { $(this).text('Gefällt mir nichtmehr'); $(this).closest('tr').addClass('liked-event'); } else { $(this).text('Gefällt mir'); $(this).closest('tr').removeClass('liked-event'); } });});
在上面的代码中，我们将 eventname 添加到了每个评分组件的 id 和 name 属性中。例如，id 变成了 eventname5，name 变成了 eventnameRate。 这样，每个事件的评分组件都有了唯一的标识符，从而实现了独立的评分功能。
HTML 和 CSS 代码 (无需修改)
以下是HTML和CSS代码，这些代码无需修改，因为问题主要在于JavaScript代码中动态生成的元素的 id 和 name 属性的冲突。
Eventüberblick Überblick Event erstellen Neues Event
Eventliste
All Eventname Eventdatum Eventort Eventbeschreibung Eventautor
*{ margin: 0; padding: 0;}.rate { float: left; height: 46px; padding: 0 10px;}.rate:not(:checked) > input { position:absolute; top:-9999px;}.rate:not(:checked) > label { float:right; width:1em; overflow:hidden; white-space:nowrap; cursor:pointer; font-size:30px; color:#ccc;}.rate:not(:checked) > label:before { content: '★ ';}.rate > input:checked ~ label { color: #ffc700; }.rate:not(:checked) > label:hover,.rate:not(:checked) > label:hover ~ label { color: #deb217; }.rate > input:checked + label:hover,.rate > input:checked + label:hover ~ label,.rate > input:checked ~ label:hover,.rate > input:checked ~ label:hover ~ label,.rate > label:hover ~ input:checked ~ label { color: #c59b08;}
注意事项
唯一标识符的选择： 选择能够唯一标识每一行的属性作为 id 和 name 的前缀。 如果事件名称不唯一，可以考虑使用事件ID或其他唯一标识符。代码维护： 在修改代码时，确保所有的 id 和 name 属性都得到了正确的更新，避免出现遗漏或错误。动态生成元素的事件绑定： 如果你需要对动态生成的元素绑定事件，可以使用事件委托的方式，将事件绑定到静态父元素上。
总结
通过确保动态生成的HTML表格中每个星级评分组件的 id 和 name 属性的唯一性，可以有效地解决评分组件互相干扰的问题。 这种方法简单易行，能够快速地实现独立的评分功能。在实际开发中，可以根据具体的需求选择合适的唯一标识符，并注意代码的维护和更新。
以上就是在动态生成的HTML表格中实现星级评分的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531254.html
微信扫一扫 
支付宝扫一扫 
