本文档旨在解决在动态生成的HTML表格中实现星级评分功能时，遇到的评分错乱问题。通过修改JavaScript代码，确保每个表格行的星级评分独立工作，互不影响。文章将提供详细的代码示例和解释，帮助开发者轻松实现此功能。
在动态生成的HTML表格中添加星级评分功能时，一个常见的问题是多个评分组件之间相互干扰，导致修改一个评分会影响到其他评分。这通常是由于在生成HTML时，多个评分组件使用了相同的id和name属性。本文将介绍如何通过修改JavaScript代码，为每个评分组件生成唯一的id和name，从而解决这个问题。
问题分析
问题的根源在于HTML元素的id和name属性的重复使用。在HTML中，id属性应该在整个文档中是唯一的。当多个元素具有相同的id时，JavaScript代码可能会错误地选择到错误的元素。类似地，当多个radio按钮具有相同的name属性时，浏览器会将它们视为同一组，导致只能选择其中一个。
解决方案
为了解决这个问题，我们需要为每个评分组件生成唯一的id和name属性。一种简单的方法是将事件名称添加到id和name属性中。这样，每个评分组件的id和name属性都将是唯一的。
立即学习“前端免费学习笔记（深入）”；
以下是修改后的JavaScript代码：
$(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 fllen Sie alle Felder aus"); return; } if (!isValidDate(eventdate)) { alert("Datum muss folgendem Format entsprechen: dd.mm.yyyy ein"); return; } // Validierung und Hinzufgen 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 fr 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'); } });});
在上面的代码中，我们将每个radio按钮的id属性修改为eventname + 5、eventname + 4等等，并将name属性修改为eventname + rate。这样，每个评分组件的id和name属性都将是唯一的。
完整示例代码
以下是完整的HTML、CSS和JavaScript代码：
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;}
$(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 fllen Sie alle Felder aus"); return; } if (!isValidDate(eventdate)) { alert("Datum muss folgendem Format entsprechen: dd.mm.yyyy ein"); return; } // Validierung und Hinzufgen 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 fr 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'); } });});
将上述代码保存为HTML、CSS和JavaScript文件，并在浏览器中打开HTML文件。您将能够动态地向表格中添加事件，并为每个事件独立地进行星级评分。
总结
通过为每个评分组件生成唯一的id和name属性，我们可以解决在动态生成的HTML表格中实现星级评分功能时遇到的评分错乱问题。这种方法简单有效，可以确保每个评分组件独立工作，互不影响。在实际开发中，可以根据具体情况选择合适的方法来生成唯一的id和name属性。例如，可以使用时间戳、随机数或者其他唯一标识符。
以上就是为动态生成的HTML表格实现星级评分的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531640.html
微信扫一扫 
支付宝扫一扫 
