本文档旨在解决在动态生成的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 + '' +
            'Gefällt mir' +
            '5 stars4 stars3 stars2 stars1 star'
            + ''
        );

        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 属性的冲突。

    
    
    

    
    
    
    
    
    

    
    



    Überblick
    Event erstellen



    
Neues Event


    

        
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    Hinzufügen
                
            
        

        
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 属性的唯一性，可以有效地解决评分组件互相干扰的问题。 这种方法简单易行，能够快速地实现独立的评分功能。在实际开发中，可以根据具体的需求选择合适的唯一标识符，并注意代码的维护和更新。