在HTML表格中为每个元素实现星级评分,该表格由用户输入生成。

huangapple go评论69阅读模式
英文:

Implement Star Rating for every element inside a html table, which is generated by User Inputs

问题

我正在尝试构建一个网站,该网站能够动态存储用户在网站上输入的任意事件,并在HTML表格中进行显示。每个存储的事件都可以通过一个星级评分系统进行评分,我已经使用HTML、JavaScript和CSS实现了这个系统。

问题是,我的当前系统只允许对其中一个元素进行评分。如果我的列表中有两个元素,并且我尝试对第二个元素进行评分,它会更改第一个元素的值,不允许我更改第二个元素的值。

我该如何解决这个问题?

以下是我的代码(其中一些警报/注释是德语的,但请不要在意这些)。

请注意,我不想使用数据库或类似的东西。我只是在这种情况下进行试验!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
$(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("请填写所有字段");
            return;
        }

        if (!isValidDate(eventdate)) {
            alert("日期必须符合以下格式:dd.mm.yyyy");
            return;
        }

        // 验证并添加到表格

        $(".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="star5" name="rate" value="5" /><label for="star5" title="text">5 stars</label><input type="radio" id="star4" name="rate" value="4" /><label for="star4" title="text">4 stars</label><input type="radio" id="star3" name="rate" value="3" /><label for="star3" title="text">3 stars</label><input type="radio" id="star2" name="rate" value="2" /><label for="star2" title="text">2 stars</label><input type="radio" id="star1" name="rate" value="1" /><label for="star1" title="text">1 star</label></div></td>' +
            '</tr>'
        );

        function isValidDate(dateString) {
            var regex = /^\d{2}\.\d{2}\.\d{4}$/;
            return regex.test(dateString);
        }

    }

    // 按钮的事件监听器
    $('#addData').click(addData);

    $('.table').on('click', '.like-button', function () {
        $(this).toggleClass('liked');
        if ($(this).hasClass('liked')) {
            $(this).text('Gefällt mir nicht mehr');
            $(this).closest('tr').addClass('liked-event');
        } else {
            $(this).text('Gefällt mir');
            $(this).closest('tr').removeClass('liked-event');
        }
    });
});
<!-- language: lang-css -->
* {
    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;
}
<!-- language: lang-html -->
<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title>Eventübersicht</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>


<details>
<summary>英文:</summary>

I am trying to build a Website, which is able to dynamically store arbitrary events from user inputs on the website in a html table. Every event stored can be rated by a star rating system which i already implemented with html, js &amp; css.

The problem is, my current system only allows to rate one of the elements. If I have two elements in my list and I try to rate the second one, it changes the value of the first element and doesn&#39;t allow me to change the value of the second one.

How can i fix this?

Here is my Code (Some Alerts/Comments are in German but just dont mind these really)

And please not i don&#39;t want to use a database or anything like this yet. I am just playing around in this case!

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(document).ready(function () {
        function addData() {
            var eventname = $(&quot;#eventname&quot;).val();
            var eventdate = $(&quot;#eventdate&quot;).val();
            var eventloc = $(&quot;#eventloc&quot;).val();
            var eventauthor = $(&quot;#eventauthor&quot;).val();
            var eventdesc = $(&quot;#eventdesc&quot;).val();

            if (eventname.trim() === &#39;&#39; || eventdate.trim() === &#39;&#39; || eventloc.trim() === &#39;&#39; || eventauthor.trim() === &#39;&#39; || eventdesc.trim() === &#39;&#39;) {
                alert(&quot;Bitte f�llen Sie alle Felder aus&quot;);
                return;
            }

            if (!isValidDate(eventdate)) {
                alert(&quot;Datum muss folgendem Format entsprechen: dd.mm.yyyy ein&quot;);
                return;
            }

            // Validierung und Hinzuf�gen zur Tabelle

            $(&quot;.table tbody tr&quot;).last().after(
                &#39;&lt;tr&gt;&#39; +
                &#39;&lt;td&gt;&lt;input type=&quot;checkbox&quot; id=&quot;select-row&quot;&gt;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventname + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventdate + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventloc + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventdesc + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventauthor + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&lt;button class=&quot;btn btn-link like-button&quot;&gt;Gef&#228;llt mir&lt;/button&gt;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&lt;div class=&quot;rate&quot;&gt;&lt;input type=&quot;radio&quot; id=&quot;star5&quot; name=&quot;rate&quot; value=&quot;5&quot; /&gt;&lt;label for=&quot;star5&quot; title=&quot;text&quot;&gt;5 stars&lt;/label&gt;&lt;input type=&quot;radio&quot; id=&quot;star4&quot; name=&quot;rate&quot; value=&quot;4&quot; /&gt;&lt;label for=&quot;star4&quot; title=&quot;text&quot;&gt;4 stars&lt;/label&gt;&lt;input type=&quot;radio&quot; id=&quot;star3&quot; name=&quot;rate&quot; value=&quot;3&quot; /&gt;&lt;label for=&quot;star3&quot; title=&quot;text&quot;&gt;3 stars&lt;/label&gt;&lt;input type=&quot;radio&quot; id=&quot;star2&quot; name=&quot;rate&quot; value=&quot;2&quot; /&gt;&lt;label for=&quot;star2&quot; title=&quot;text&quot;&gt;2 stars&lt;/label&gt;&lt;input type=&quot;radio&quot; id=&quot;star1&quot; name=&quot;rate&quot; value=&quot;1&quot; /&gt;&lt;label for=&quot;star1&quot; title=&quot;text&quot;&gt;1 star&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;&#39;
                + &#39;&lt;/tr&gt;&#39;
            );

            function isValidDate(dateString) {
                var regex = /^\d{2}\.\d{2}\.\d{4}$/;
                return regex.test(dateString);
            }

        }

        // Eventlistener f�r den Button
        $(&#39;#addData&#39;).click(addData);

        $(&#39;.table&#39;).on(&#39;click&#39;, &#39;.like-button&#39;, function () {
            $(this).toggleClass(&#39;liked&#39;);
            if ($(this).hasClass(&#39;liked&#39;)) {
                $(this).text(&#39;Gef&#228;llt mir nichtmehr&#39;);
                $(this).closest(&#39;tr&#39;).addClass(&#39;liked-event&#39;);
            } else {
                $(this).text(&#39;Gef&#228;llt mir&#39;);
                $(this).closest(&#39;tr&#39;).removeClass(&#39;liked-event&#39;);
            }
        });
    });

&lt;!-- language: lang-css --&gt;

    *{
        margin: 0;
        padding: 0;
    }
    .rate {
        float: left;
        height: 46px;
        padding: 0 10px;
    }
    .rate:not(:checked) &gt; input {
        position:absolute;
        top:-9999px;
    }
    .rate:not(:checked) &gt; label {
        float:right;
        width:1em;
        overflow:hidden;
        white-space:nowrap;
        cursor:pointer;
        font-size:30px;
        color:#ccc;
    }
    .rate:not(:checked) &gt; label:before {
        content: &#39;★ &#39;;
    }
    .rate &gt; input:checked ~ label {
        color: #ffc700;    
    }
    .rate:not(:checked) &gt; label:hover,
    .rate:not(:checked) &gt; label:hover ~ label {
        color: #deb217;  
    }
    .rate &gt; input:checked + label:hover,
    .rate &gt; input:checked + label:hover ~ label,
    .rate &gt; input:checked ~ label:hover,
    .rate &gt; input:checked ~ label:hover ~ label,
    .rate &gt; label:hover ~ input:checked ~ label {
        color: #c59b08;
    }

&lt;!-- language: lang-html --&gt;

    &lt;!DOCTYPE html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot; /&gt;
        &lt;title&gt;Event&#252;berblick&lt;/title&gt;
        &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;

        &lt;!-- Bootstrap 4 CDN --&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;
        &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;Script1.js&quot;&gt;&lt;/script&gt;

        &lt;!-- Fontawesome CDN Link --&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css&quot; /&gt;
    &lt;/head&gt;

    &lt;header&gt;
        &lt;a href=&quot;index.html&quot;&gt;&#220;berblick&lt;/a&gt;
        &lt;a href=&quot;CreateEvent.html&quot;&gt;Event erstellen&lt;/a&gt;
    &lt;/header&gt;

    &lt;body&gt;
        &lt;h1 class=&quot;headline&quot; style=&quot;text-align: center;&quot;&gt;Neues Event&lt;/h1&gt;


        &lt;div class=&quot;container&quot;&gt;

            &lt;div class=&quot;form-div&quot;&gt;
                &lt;div class=&quot;row&quot;&gt;
                    &lt;div class=&quot;col-md-3&quot;&gt;
                        &lt;input type = &quot;text&quot; class=&quot;form-control&quot; id=&quot;eventname&quot; placeholder=&quot;Eventname&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-3&quot;&gt;
                        &lt;input type = &quot;datetime&quot; class=&quot;form-control&quot; id=&quot;eventdate&quot; placeholder=&quot;Eventdatum&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-3&quot;&gt;
                        &lt;input type = &quot;text&quot; class=&quot;form-control&quot; id=&quot;eventloc&quot; placeholder=&quot;Eventort&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-3&quot;&gt;
                        &lt;input type = &quot;text&quot; class=&quot;form-control&quot; id=&quot;eventauthor&quot; placeholder=&quot;Eventautor&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-3&quot;&gt;
                        &lt;input type = &quot;text&quot; class=&quot;form-control&quot; id=&quot;eventdesc&quot; placeholder=&quot;Eventbeschreibung&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-3&quot; style=&quot;text-align: right;&quot;&gt;
                        &lt;button class=&quot;btn btn-primary&quot; id=&quot;addData&quot;&gt;Hinzuf&#252;gen&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;h2 class=&quot;headline&quot; style=&quot;text-align: center;&quot;&gt;Eventliste&lt;/h2&gt;
            &lt;div class=&quot;container&quot;&gt;
                &lt;table class=&quot;table&quot;&gt;
                    &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th&gt;All&lt;input type=&quot;checkbox&quot; id=&quot;select-all&quot;&gt;&lt;/th&gt;
                            &lt;th&gt;Eventname&lt;/th&gt;
                            &lt;th&gt;Eventdatum&lt;/th&gt;
                            &lt;th&gt;Eventort&lt;/th&gt;
                            &lt;th&gt;Eventbeschreibung&lt;/th&gt;
                            &lt;th&gt;Eventautor&lt;/th&gt;
                        &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                        &lt;tr&gt;
                        
                        &lt;/tr&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/div&gt;
        &lt;/div&gt;

       &lt;script&gt;&lt;/script&gt; 

    &lt;/body&gt;

&lt;!-- end snippet --&gt;



</details>


# 答案1
**得分**: 0

以下是您 JavaScript 代码中的问题:

1. 每个事件都有一系列具有相同 `id` 属性的复选框,跨多个事件具有相同的 `name` 属性。
2. 每个事件都有一系列具有相同 `name` 属性的复选框,跨多个事件具有相同的 `id` 属性。

这意味着每一行都有一个名为 "star1"、"star2" 等的 `name` 属性的复选框。浏览器无法知道您点击了哪个事件(一组复选框)。

我已经将事件名称添加到每一行的 ID 和 `name` 属性中,现在它可以正常工作,因为浏览器现在可以区分每个事件的复选框组。

在您的字符串中,一个输入更改为:

```html
<input type="radio" id="'+eventname+'5" name="'+eventname+'rate" value="5" />

现在看起来是这样的:

$(".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>'
);

您的其余代码(CSS、HTML)都没有问题。这是整个可工作的代码:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

$(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 nicht mehr');
            $(this).closest('tr').addClass('liked-event');
        } else {
            $(this).text('Gefällt mir');
            $(this).closest('tr').removeClass('liked-event');
        }
    });
});

<!-- language: lang-css -->

*{
    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: #c59b

<details>
<summary>英文:</summary>

You have two issues in your javascript code.

 1. Each event had a series of checkboxes with the same `id` attribute across multiple events.
 2. Each event had a series of checkboxes with the same `name` attribute across multiple events.

This means that each row had a checkbox with a `name` attribute called &quot;star1&quot;, &quot;star2&quot;, ...
The browser doesn&#39;t know in which event (group of checkboxes) you clicked.

I added the event name to the ID and the `name` attribute of each row and it works, because now the browser can make a distinction between each group of checkboxes per event.

In your string, an input is changed to:

    &lt;input type=&quot;radio&quot; id=&quot;&#39;+eventname+&#39;5&quot; name=&quot;&#39;+eventname+&#39;rate&quot; value=&quot;5&quot; /&gt;

And now looks like this:

            $(&quot;.table tbody tr&quot;).last().after(
                &#39;&lt;tr&gt;&#39; +
                &#39;&lt;td&gt;&lt;input type=&quot;checkbox&quot; id=&quot;select-row&quot;&gt;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventname + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventdate + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventloc + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventdesc + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventauthor + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&lt;button class=&quot;btn btn-link like-button&quot;&gt;Gef&#228;llt mir&lt;/button&gt;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&lt;div class=&quot;rate&quot;&gt;&lt;input type=&quot;radio&quot; id=&quot;&#39;+eventname+&#39;5&quot; name=&quot;&#39;+eventname+&#39;rate&quot; value=&quot;5&quot; /&gt;&lt;label for=&quot;&#39;+eventname+&#39;5&quot; title=&quot;text&quot;&gt;5 stars&lt;/label&gt;&lt;input type=&quot;radio&quot; id=&quot;&#39;+eventname+&#39;4&quot; name=&quot;&#39;+eventname+&#39;rate&quot; value=&quot;4&quot; /&gt;&lt;label for=&quot;&#39;+eventname+&#39;4&quot; title=&quot;text&quot;&gt;4 stars&lt;/label&gt;&lt;input type=&quot;radio&quot; id=&quot;&#39;+eventname+&#39;3&quot; name=&quot;&#39;+eventname+&#39;rate&quot; value=&quot;3&quot; /&gt;&lt;label for=&quot;&#39;+eventname+&#39;3&quot; title=&quot;text&quot;&gt;3 stars&lt;/label&gt;&lt;input type=&quot;radio&quot; id=&quot;&#39;+eventname+&#39;2&quot; name=&quot;&#39;+eventname+&#39;rate&quot; value=&quot;2&quot; /&gt;&lt;label for=&quot;&#39;+eventname+&#39;2&quot; title=&quot;text&quot;&gt;2 stars&lt;/label&gt;&lt;input type=&quot;radio&quot; id=&quot;&#39;+eventname+&#39;1&quot; name=&quot;&#39;+eventname+&#39;rate&quot; value=&quot;1&quot; /&gt;&lt;label for=&quot;&#39;+eventname+&#39;1&quot; title=&quot;text&quot;&gt;1 star&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;&#39;
                + &#39;&lt;/tr&gt;&#39;
            );

The rest of your code (CSS, HTML) is fine. Here&#39;s the entire working code:

&lt;!-- begin snippet: js hide: false console: true babel: null --&gt;

&lt;!-- language: lang-js --&gt;

    $(document).ready(function () {
        function addData() {
            var eventname = $(&quot;#eventname&quot;).val();
            var eventdate = $(&quot;#eventdate&quot;).val();
            var eventloc = $(&quot;#eventloc&quot;).val();
            var eventauthor = $(&quot;#eventauthor&quot;).val();
            var eventdesc = $(&quot;#eventdesc&quot;).val();

            if (eventname.trim() === &#39;&#39; || eventdate.trim() === &#39;&#39; || eventloc.trim() === &#39;&#39; || eventauthor.trim() === &#39;&#39; || eventdesc.trim() === &#39;&#39;) {
                alert(&quot;Bitte f�llen Sie alle Felder aus&quot;);
                return;
            }

            if (!isValidDate(eventdate)) {
                alert(&quot;Datum muss folgendem Format entsprechen: dd.mm.yyyy ein&quot;);
                return;
            }

            // Validierung und Hinzuf�gen zur Tabelle

            $(&quot;.table tbody tr&quot;).last().after(
                &#39;&lt;tr&gt;&#39; +
                &#39;&lt;td&gt;&lt;input type=&quot;checkbox&quot; id=&quot;select-row&quot;&gt;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventname + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventdate + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventloc + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventdesc + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&#39; + eventauthor + &#39;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&lt;button class=&quot;btn btn-link like-button&quot;&gt;Gef&#228;llt mir&lt;/button&gt;&lt;/td&gt;&#39; +
                &#39;&lt;td&gt;&lt;div class=&quot;rate&quot;&gt;&lt;input type=&quot;radio&quot; id=&quot;&#39;+eventname+&#39;5&quot; name=&quot;&#39;+eventname+&#39;rate&quot; value=&quot;5&quot; /&gt;&lt;label for=&quot;&#39;+eventname+&#39;5&quot; title=&quot;text&quot;&gt;5 stars&lt;/label&gt;&lt;input type=&quot;radio&quot; id=&quot;&#39;+eventname+&#39;4&quot; name=&quot;&#39;+eventname+&#39;rate&quot; value=&quot;4&quot; /&gt;&lt;label for=&quot;&#39;+eventname+&#39;4&quot; title=&quot;text&quot;&gt;4 stars&lt;/label&gt;&lt;input type=&quot;radio&quot; id=&quot;&#39;+eventname+&#39;3&quot; name=&quot;&#39;+eventname+&#39;rate&quot; value=&quot;3&quot; /&gt;&lt;label for=&quot;&#39;+eventname+&#39;3&quot; title=&quot;text&quot;&gt;3 stars&lt;/label&gt;&lt;input type=&quot;radio&quot; id=&quot;&#39;+eventname+&#39;2&quot; name=&quot;&#39;+eventname+&#39;rate&quot; value=&quot;2&quot; /&gt;&lt;label for=&quot;&#39;+eventname+&#39;2&quot; title=&quot;text&quot;&gt;2 stars&lt;/label&gt;&lt;input type=&quot;radio&quot; id=&quot;&#39;+eventname+&#39;1&quot; name=&quot;&#39;+eventname+&#39;rate&quot; value=&quot;1&quot; /&gt;&lt;label for=&quot;&#39;+eventname+&#39;1&quot; title=&quot;text&quot;&gt;1 star&lt;/label&gt;&lt;/div&gt;&lt;/td&gt;&#39;
                + &#39;&lt;/tr&gt;&#39;
            );

            function isValidDate(dateString) {
                var regex = /^\d{2}\.\d{2}\.\d{4}$/;
                return regex.test(dateString);
            }

        }

        // Eventlistener f�r den Button
        $(&#39;#addData&#39;).click(addData);

        $(&#39;.table&#39;).on(&#39;click&#39;, &#39;.like-button&#39;, function () {
            $(this).toggleClass(&#39;liked&#39;);
            if ($(this).hasClass(&#39;liked&#39;)) {
                $(this).text(&#39;Gef&#228;llt mir nichtmehr&#39;);
                $(this).closest(&#39;tr&#39;).addClass(&#39;liked-event&#39;);
            } else {
                $(this).text(&#39;Gef&#228;llt mir&#39;);
                $(this).closest(&#39;tr&#39;).removeClass(&#39;liked-event&#39;);
            }
        });
    });

&lt;!-- language: lang-css --&gt;

    *{
        margin: 0;
        padding: 0;
    }
    .rate {
        float: left;
        height: 46px;
        padding: 0 10px;
    }
    .rate:not(:checked) &gt; input {
        position:absolute;
        top:-9999px;
    }
    .rate:not(:checked) &gt; label {
        float:right;
        width:1em;
        overflow:hidden;
        white-space:nowrap;
        cursor:pointer;
        font-size:30px;
        color:#ccc;
    }
    .rate:not(:checked) &gt; label:before {
        content: &#39;★ &#39;;
    }
    .rate &gt; input:checked ~ label {
        color: #ffc700;    
    }
    .rate:not(:checked) &gt; label:hover,
    .rate:not(:checked) &gt; label:hover ~ label {
        color: #deb217;  
    }
    .rate &gt; input:checked + label:hover,
    .rate &gt; input:checked + label:hover ~ label,
    .rate &gt; input:checked ~ label:hover,
    .rate &gt; input:checked ~ label:hover ~ label,
    .rate &gt; label:hover ~ input:checked ~ label {
        color: #c59b08;
    }

&lt;!-- language: lang-html --&gt;

    &lt;!DOCTYPE html&gt;

    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot; /&gt;
        &lt;title&gt;Event&#252;berblick&lt;/title&gt;
        &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;

        &lt;!-- Bootstrap 4 CDN --&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;
        &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;Script1.js&quot;&gt;&lt;/script&gt;

        &lt;!-- Fontawesome CDN Link --&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css&quot; /&gt;
    &lt;/head&gt;

    &lt;header&gt;
        &lt;a href=&quot;index.html&quot;&gt;&#220;berblick&lt;/a&gt;
        &lt;a href=&quot;CreateEvent.html&quot;&gt;Event erstellen&lt;/a&gt;
    &lt;/header&gt;

    &lt;body&gt;
        &lt;h1 class=&quot;headline&quot; style=&quot;text-align: center;&quot;&gt;Neues Event&lt;/h1&gt;


        &lt;div class=&quot;container&quot;&gt;

            &lt;div class=&quot;form-div&quot;&gt;
                &lt;div class=&quot;row&quot;&gt;
                    &lt;div class=&quot;col-md-3&quot;&gt;
                        &lt;input type = &quot;text&quot; class=&quot;form-control&quot; id=&quot;eventname&quot; placeholder=&quot;Eventname&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-3&quot;&gt;
                        &lt;input type = &quot;datetime&quot; class=&quot;form-control&quot; id=&quot;eventdate&quot; placeholder=&quot;Eventdatum&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-3&quot;&gt;
                        &lt;input type = &quot;text&quot; class=&quot;form-control&quot; id=&quot;eventloc&quot; placeholder=&quot;Eventort&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-3&quot;&gt;
                        &lt;input type = &quot;text&quot; class=&quot;form-control&quot; id=&quot;eventauthor&quot; placeholder=&quot;Eventautor&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-3&quot;&gt;
                        &lt;input type = &quot;text&quot; class=&quot;form-control&quot; id=&quot;eventdesc&quot; placeholder=&quot;Eventbeschreibung&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-3&quot; style=&quot;text-align: right;&quot;&gt;
                        &lt;button class=&quot;btn btn-primary&quot; id=&quot;addData&quot;&gt;Hinzuf&#252;gen&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;h2 class=&quot;headline&quot; style=&quot;text-align: center;&quot;&gt;Eventliste&lt;/h2&gt;
            &lt;div class=&quot;container&quot;&gt;
                &lt;table class=&quot;table&quot;&gt;
                    &lt;thead&gt;
                        &lt;tr&gt;
                            &lt;th&gt;All&lt;input type=&quot;checkbox&quot; id=&quot;select-all&quot;&gt;&lt;/th&gt;
                            &lt;th&gt;Eventname&lt;/th&gt;
                            &lt;th&gt;Eventdatum&lt;/th&gt;
                            &lt;th&gt;Eventort&lt;/th&gt;
                            &lt;th&gt;Eventbeschreibung&lt;/th&gt;
                            &lt;th&gt;Eventautor&lt;/th&gt;
                        &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                        &lt;tr&gt;
                        
                        &lt;/tr&gt;
                    &lt;/tbody&gt;
                &lt;/table&gt;
            &lt;/div&gt;
        &lt;/div&gt;

       &lt;script&gt;&lt;/script&gt; 

    &lt;/body&gt;

&lt;!-- end snippet --&gt;



</details>



huangapple
  • 本文由 发表于 2023年6月5日 21:50:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/76407105.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定