新闻中心

在HTML表格中为动态生成元素实现星级评分功能

2025-10-21
浏览次数：次
返回列表

在html表格中为动态生成元素实现星级评分功能

本文档旨在解决在动态生成的HTML表格中，为每个元素实现独立的星级评分功能的问题。通过修改J*aScript代码，确保每个事件的评分选项具有唯一的ID和名称，从而避免评分冲突，实现对每个表格行中元素的独立评分。本文将提供修改后的代码和详细的解释，帮助开发者轻松实现这一功能。

问题分析

在动态生成的HTML表格中，如果每个元素的星级评分选项使用相同的id和name属性，会导致评分功能出现问题。具体来说，当用户为一个元素评分时，由于id和name冲突，其他元素的评分也会受到影响，无法实现独立的评分功能。

解决方案

要解决这个问题，需要确保每个元素的星级评分选项具有唯一的id和name属性。这可以通过在动态生成HTML代码时，将事件名称或其他唯一标识符添加到id和name属性中来实现。

代码实现

以下是修改后的J*aScript代码，其中关键部分在于addData函数中动态生成HTML表格行的部分：

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

在上述代码中，id和name属性被修改为：

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

这样，每个事件的星级评分选项都具有唯一的id和name，避免了冲突。

AI Surge Cloud AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

AI Surge Cloud 87 查看详情 AI Surge Cloud

完整代码示例

以下是完整的HTML、CSS和J*aScript代码示例：

HTML (index.html):

<!DOCTYPE html>
<html>
<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="script.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>
                        <th>Like</th>
                        <th>Bewertung</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>

                    </tr>
                </tbody>
            </table>
        </div>
    </div>

   <script></script> 

</body>
</html>

CSS (style.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;
}

J*aScript (script.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 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(
            '<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 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');
        }
    });
});

注意事项

  • 确保eventname变量的值是唯一的，以便为每个事件生成唯一的id和name。
  • 可以根据实际需求修改id和name的生成方式，例如使用时间戳或其他唯一标识符。
  • 在实际应用中，可能需要将评分数据存储到服务器端，以便持久化存储。

总结

通过为动态生成的HTML表格中的每个元素的星级评分选项生成唯一的id和name属性，可以有效地解决评分冲突问题，实现独立的评分功能。本文提供的代码示例和解释可以帮助开发者轻松实现这一功能，并根据实际需求进行修改和扩展。

以上就是在HTML表格中为动态生成元素实现星级评分功能的详细内容，更多请关注其它相关文章！


# 自定义  # 简阳网络推广网站有哪些  # 丰台网站建设银行  # 泉州seo免费创业  # 关于旅游网站的推广软文  # seo推广算命  # 海珠区网站优化报价公示  # 无锡网站如何建设  # 营销推广周记怎么写好看  # app如何营销推广  # 全套营销推广设计  # 中文网  # 相关文章  # 也会  # 容器内  # 拖拽  # css  # 或其他  # 中为  # 这一  # 复选框  # cdn  # ai  # go  # ajax  # bootstrap  # js  # html  # jquery  # java  # javascript 


相关栏目： 【 科技资讯46185 】 【 网络学院92790 】


相关推荐： 台积电1.4nm工艺A14瞄准2028：10年来性能提升80%  c++如何使用std::memory_order控制原子操作顺序_c++ C++11内存模型详解  html怎么在cmd下运行php文件_cmd运行html中php文件方法【教程】  Python模块化编程：有效管理依赖与避免循环引用  抖音小游戏合成大西瓜免费秒玩入口链接 抖音小游戏热门合集秒玩网站  TikTok网页版直接登录 TikTok网页端官方平台入口  知乎APP怎么管理已购盐选内容_知乎APP盐选内容购买记录与查看方法  AO3官方在线访问地址 Archive of Our Own最新镜像合集  批改网学生版PC登录 批改网官网登录系统入口  《主播少女的秘密账号迷宫》首支宣传片  Yandex搜索引擎官方地址 俄罗斯网络世界的主要入口  J*aScript中高效管理与清空动态列表：避免循环陷阱  VS Code远程开发时如何处理文件权限问题  漫蛙漫画官方首页 漫蛙2漫画在线阅读入口  CSS Flexbox如何实现多行排列_flex-wrap wrap自动换行显示  微信网页版官方入口教程 微信网页版网页版快速登录步骤  如何使用CaptainHook和Composer管理Git钩子_在提交前自动运行代码检查的Composer配置  将HTML动态表格多行数据保存到Google Sheet的教程  微信网页版官方快速登录入口 微信网页版网页版账号直达  Windows 11怎么彻底关闭定位_Windows 11服务中禁用Geolocation  J*aScript DOM操作：高效清空列表元素的策略与实践  单射、满射与双射的关系 一文理清所有逻辑  夸克浏览器网页版最新地址 夸克浏览器官方入口合集  J*aScript中正确使用querySelectorAll与复杂CSS选择器  Lar*el递归关系中排除子孙节点的策略  Sublime Text怎么显示空格和制表符_Sublime显示不可见字符设置  快速CSGO开箱网站指南 CSGO开箱平台推荐  理解Python模块与全局变量的作用域管理  如何将一个大型PHP应用拆分为多个Composer包_微服务与模块化架构的Composer实践  mc.js游戏直达 mc.js网页免下载版本秒进地址  Python vgamepad库按键模拟：正确使用XUSB_BUTTON常量  高德地图家和公司地址在哪设置 高德地图通勤路线设置方法【超详细】  mysql密码锁定怎么解锁_mysql密码锁定解锁后修改密码步骤  在J*a项目里如何构建对象之间的契约_接口约束的实际落地  CSS图片焦点样式实现教程：理解与应用tabindex属性  抖音商城签到领现金是真的吗_抖音商城签到奖励与提现说明  Win10磁盘清理工具在哪 Win10打开并使用磁盘清理【教程】  Excel文件在线转换快速入口 Excel在线格式转换网站  Mac终端命令大全_Mac常用Terminal指令速查  QQ邮箱登录官网首页 腾讯QQ邮箱网页入口  sublime怎么格式化代码_sublime代码美化与一键排版插件配置  Win10双系统截图高效法 截屏快捷键速记【技巧】  AWS EC2实例间SQL Server连接超时：安全组配置与故障排除指南  ArrayList与LinkedList操作复杂度详解：遍历与修改  c++中的const_cast和reinterpret_cast怎么用_c++四种类型转换  厨房不锈钢水槽发黑生锈怎么处理_水槽用可乐+锡纸2分钟抛亮如新  12306选座如何查看座位示意图_12306座位示意图解读与使用  如何高效处理PHP中的Excel数据导入导出？PortPHP/Spreadsheet助你轻松搞定！  Gmail邮箱申请注册直达_Gmail邮箱免费注册PC版官网入口2025  腾讯视频怎么使用多账号家庭管理_腾讯视频家庭多账号统一管理与权限分配教程 

上一篇：J*aScript URL 构建：解决 Base URL 路径被剥离的问题
下一篇：J*aScript装饰器与元数据编程

搜索