薛乎乎~ 2024-05-14 16:14 采纳率: 96.2%
浏览 0
已结题

怎样完善修改部分的jquery语句

怎样完善修改部分的jquery语句


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="images/logo.ico"rel="icon" type="image/logo-icon">
    <title>产品介绍</title>
    <style type="text/css">
        @import url("qiye.css");
        @import url("product.css");
    </style>
    <style type="text/css">
        
    </style>
    <script src="jquery-3.7.1.min.js"></script>
    <script src="product.js"></script>
    </head>
<body>
    <div class="flex-container1">
        <div class="box1">
            <input type="text"placeholder="请输入搜索内容">
            <button type="submit">搜索</button>
        </div>
</div>
    <div>
        <ul type="none">
            <li><a href="index.html"target="_blank"title="首页">首页</a></li>
            <li><a href="company_introduction.html"target="_blank"title="公司简介">公司简介</a></li>
            <li><a href="news_dynamic.html"target="_blank"title="新闻资讯">新闻资讯</a></li>
            <li><a href="product_introduction.html"target="_blank"title="产品介绍">产品介绍</a></li>
            <li><a href="employee_anti_counterfeiting.html"target="_blank"title="员工防伪">员工防伪</a></li>
            <li><a href="supply_chain.html"target="_blank"title="供应链">供应链</a></li>
            <li><a href="zhongxiaoer.html"target="_blank"title="众小二">众小二</a></li>
            <li><a href="message_boards.html"target="_blank"title="留言板">留言板</a></li>
            <li><a href="join_us.html"target="_blank"title="加入我们">加入我们</a></li>
        </ul>
    </div>
    <h1>小样臻选</h1>
    <h2 align="center">添加新产品</h2>
    <form id="addForm">
        <input type="text" id="nameInput" placeholder="产品名称" required>
        <input type="text" id="descriptionInput" placeholder="产品介绍" required>
        <input type="number" id="priceInput" placeholder="产品价格" required>
        <button type="submit"class="submit1">添加</button>
    </form>
    <br><br>
    <table id="productTable"border="1px"cellspacing="0"align="center">
        <thead>
            <tr>
                <th>ID</th>
                <th>产品名称</th>
                <th>产品描述</th>
                <th>产品价格</th>
                <th class="th">操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    
    

    <script>
        $(document).ready(function () {
    // 添加数据
    var products = [
        { id: 1, name: '抽纸', description: '80抽4层抽取式面巾纸 柔软纸巾 加厚 加大 大整箱发货', price: 39.9 },
        { id: 2, name: '厚汁肉酱米线', description: '整箱发货 6包装', price: 59.9 }
    ];
 
    function displayProducts(products) {
        var tableBody = $('#productTable tbody');
        tableBody.empty();
        //遍历
        for (var i = 0; i < products.length; i++) {
            var product = products[i];
            var row = `
                <tr>
                    <td>${product.id}</td>
                    <td>${product.name}</td>
                    <td>${product.description}</td>
                    <td>${product.price}</td>
                    <td><button class="editButton" data-id="${product.id}">修改</button> <button class="deleteButton" data-id="${product.id}">删除</button></td>
                </tr>
            `;
            //追加到表中
            tableBody.append(row);
        }
    }
 
    displayProducts(products);
 //添加产品信息
    $('#addForm').on('submit', function (e) {
        e.preventDefault();
        //获取添加的表格
        var name = $('#nameInput').val();
        var description = $('#descriptionInput').val();
        var price = parseFloat($('#priceInput').val());
        //判断价格是否为数字
        if (!isNaN(price)) {
            var newProduct = { id: products.length + 1, name, description, price };
            products.push(newProduct);
            displayProducts(products);
            clearForm('#addForm');
        } else {
            alert('请输入有效价格.');
        }
    });
 //为修改按钮提供响应
    $(document).on('click', '.editButton', function () {
        var productId = parseInt($(this).data('id'));
        var editedProduct = prompt('产品ID', `${productId}, '产品名称' ${products[productId - 1].name}, '产品介绍'${products[productId - 1].description}, '产品价格' ${products[productId - 1].price}`);
       if (editedProduct) {
            var fields = editedProduct.split(',');
            var index = products.findIndex(p => p.id === productId);
            products[index] = { id: productId, name: fields[1], description: fields[2], price: parseFloat(fields[3]) };
            displayProducts(products);
        }
    });
 //为删除按钮提供响应
    $(document).on('click', '.deleteButton', function () {
        var productId = parseInt($(this).data('id'));
        var confirmation = confirm(`你确定要删除ID为 ${productId}?的产品吗`);
        if (confirmation) {
            var index = products.findIndex(p => p.id === productId);
            products.splice(index, 1);
            displayProducts(products);
        }
    });
});
 
function clearForm(formId) {
    $(formId + ' input').val('');
}
    </script>
    <div class="box7">  
        <p>邮政编码:230088</p>
        <p>企业邮箱:servic@sanzhiyang.cn</p>
        <p>廉政邮箱:supplier@sanzhiyan.cn</p>
        <p>公司地址:安徽合肥市蜀山区磨子潭路1366号</p>
       <br>
  </div>
</body>
</html>

```

  • 写回答

2条回答 默认 最新

  • 笑面虎 2024-05-14 16:19
    关注

    以下内容由CHATGPT及笑面虎共同生成、有用望采纳:


    【您想要解决的问题】:您提问的目的是想要完善和修改现有的 jQuery 代码,以便能够正确地编辑(修改)和删除产品信息,并确保这些操作在网页上能够正常工作。

    【问题出现原因】:从您提供的代码和描述来看,问题可能出现在以下几个方面:

    1. 修改产品信息的逻辑可能存在问题,特别是在使用 prompt 来获取用户输入时,需要正确地解析和处理输入的数据。
    2. 删除产品信息的逻辑看起来是正确的,但是如果需要进一步的优化或者有特定的错误也需要检查。

    【问题解决方案】:为了解决修改产品信息的问题,我们需要改进 .editButton 的点击事件处理函数。同时,确保删除功能按预期工作。以下是对您现有代码的一些建议修改:

    1. 修改 .editButton 的点击事件处理函数,使用更合理的方式来获取用户输入,而不是 prompt

    2. 确保删除功能正常工作,并且用户界面上有相应的确认提示。

    【提供代码】:以下是修改后的代码示例:

    // 为修改按钮提供响应
    $(document).on('click', '.editButton', function () {
        var productId = $(this).data('id');
        var product = products.find(p => p.id === productId);
        if (!product) return;
    
        // 使用更合适的方式获取用户输入,例如模态对话框(modal dialog)
        // 这里只是一个示例,实际实现可能需要更多的代码和HTML结构
        var newName = window.prompt("请输入新的产品名称:", product.name);
        var newDescription = window.prompt("请输入新的产品介绍:", product.description);
        var newPrice = window.prompt("请输入新的产品价格:", product.price);
    
        // 验证输入是否有效
        if (newName && newDescription && !isNaN(newPrice)) {
            product.name = newName;
            product.description = newDescription;
            product.price = parseFloat(newPrice);
            displayProducts(products);
        } else {
            alert("输入信息不完整或价格格式不正确!");
        }
    });
    

    【代码运行方式】:您需要将这段代码替换到您现有的 <script> 标签中,并确保您的网页能够加载 jQuery 库。在网页浏览器中打开 HTML 文件即可运行。

    【代码预期运行结果】:点击修改按钮后,将弹出输入框让用户输入新的产品名称、描述和价格。输入完成后,产品信息将更新,并且表格将重新渲染以显示新的产品数据。

    【推荐相关链接】:

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月22日
  • 已采纳回答 5月14日
  • 创建了问题 5月14日

悬赏问题

  • ¥15 35114 SVAC视频验签的问题
  • ¥15 impedancepy
  • ¥15 在虚拟机环境下完成以下,要求截图!
  • ¥15 求往届大挑得奖作品(ppt…)
  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中,如何配置环境,可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图
  • ¥15 UE5.1局部变量对蓝图不可见