本文档旨在解决在动态生成的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(
'<tr>' +
'<td><input type="checkbox" id="select-row"></td>' +
'<td>' + eventname + '</td>' +
'<td>' + eventdate + '</td>' +
'<td>' + eventloc + '</td>' +
'<td>' + eventdesc + '</td>' +
'<td>' + eventauthor + '</td>' +
'<td><button class="btn btn-link like-button">Gefällt mir</button></td>' +
'<td><div class="rate"><input type="radio" id="'+eventname+'5" name="'+eventname+'rate" value="5" /><label for="'+eventname+'5" title="text">5 stars</label><input type="radio" id="'+eventname+'4" name="'+eventname+'rate" value="4" /><label for="'+eventname+'4" title="text">4 stars</label><input type="radio" id="'+eventname+'3" name="'+eventname+'rate" value="3" /><label for="'+eventname+'3" title="text">3 stars</label><input type="radio" id="'+eventname+'2" name="'+eventname+'rate" value="2" /><label for="'+eventname+'2" title="text">2 stars</label><input type="radio" id="'+eventname+'1" name="'+eventname+'rate" value="1" /><label for="'+eventname+'1" title="text">1 star</label></div></td>'
+ '</tr>'
);
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 属性的冲突。
<head>
<meta charset="utf-8" />
<title>Eventüberblick</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- Bootstrap 4 CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="Script1.js"></script>
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
</head>
<header>
<a href="index.html">Überblick</a>
<a href="CreateEvent.html">Event erstellen</a>
</header>
<body>
<h1 class="headline" style="text-align: center;">Neues Event</h1>
<div class="container">
<div class="form-div">
<div class="row">
<div class="col-md-3">
<input type = "text" class="form-control" id="eventname" placeholder="Eventname">
</div>
<div class="col-md-3">
<input type = "datetime" class="form-control" id="eventdate" placeholder="Eventdatum">
</div>
<div class="col-md-3">
<input type = "text" class="form-control" id="eventloc" placeholder="Eventort">
</div>
<div class="col-md-3">
<input type = "text" class="form-control" id="eventauthor" placeholder="Eventautor">
</div>
<div class="col-md-3">
<input type = "text" class="form-control" id="eventdesc" placeholder="Eventbeschreibung">
</div>
<div class="col-md-3" style="text-align: right;">
<button class="btn btn-primary" id="addData">Hinzufügen</button>
</div>
</div>
</div>
<h2 class="headline" style="text-align: center;">Eventliste</h2>
<div class="container">
<table class="table">
<thead>
<tr>
<th>All<input type="checkbox" id="select-all"></th>
<th>Eventname</th>
<th>Eventdatum</th>
<th>Eventort</th>
<th>Eventbeschreibung</th>
<th>Eventautor</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
<script></script>
</body>*{
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 属性的唯一性，可以有效地解决评分组件互相干扰的问题。 这种方法简单易行，能够快速地实现独立的评分功能。在实际开发中，可以根据具体的需求选择合适的唯一标识符，并注意代码的维护和更新。
