开发者社区 问答 正文

表格点击修改弹出了个框,怎么把表格的值回显在那个框里,然后修改后再在表格里面显示。

表格点击修改弹出了个框,怎么把表格的值回显在那个框里,然后修改后再在表格里面显示。

这些都不走后台的那种操作 怎么搞

本问题来自阿里云开发者社区的【11大垂直技术领域开发者社群】。 https://developer.aliyun.com/article/706511 点击链接欢迎加入感兴趣的技术领域群。

展开
收起
游客mxpnxp6g3cq7o 2019-08-20 20:01:30 515 分享
分享
版权
举报
阿里云 AI 助理回答

在不通过后台交互的情况下,实现表格数据的修改并回显,通常可以使用前端技术(如JavaScript、Vue.js、React.js等)来完成。以下是一个简单的使用原生JavaScript实现的示例步骤:

1. HTML结构

首先,你的表格和弹出框需要有对应的HTML结构。这里假设你有一个表格和一个隐藏的表单弹出框。

<table id="data-table">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <!-- 假设这是动态生成的数据 -->
        <tr data-id="1">
            <td>张三</td>
            <td>25</td>
            <td><button onclick="editRow(this)">编辑</button></td>
        </tr>
    </tbody>
</table>

<div id="edit-modal" style="display:none;">
    <input type="text" id="name-input" />
    <input type="text" id="age-input" />
    <button onclick="saveChanges()">保存</button>
</div>

2. JavaScript逻辑

接下来是JavaScript部分,用于处理点击编辑按钮时显示弹出框,并将当前行的数据填充到输入框中,以及保存更改后更新表格内容。

function editRow(button) {
    // 获取当前行数据
    var row = button.closest('tr');
    var name = row.children[0].textContent;
    var age = row.children[1].textContent;

    // 回显数据到弹出框
    document.getElementById('name-input').value = name;
    document.getElementById('age-input').value = age;

    // 显示弹出框
    document.getElementById('edit-modal').style.display = 'block';
}

function saveChanges() {
    // 获取用户在弹出框中输入的新值
    var newName = document.getElementById('name-input').value;
    var newAge = document.getElementById('age-input').value;

    // 隐藏弹出框
    document.getElementById('edit-modal').style.display = 'none';

    // 更新表格中的数据(这里直接硬编码了第一个单元格和第二个单元格,实际应用中可能需要更灵活的处理)
    var row = document.querySelector('[data-id="1"]');
    row.children[0].textContent = newName; // 更新姓名
    row.children[1].textContent = newAge;   // 更新年龄
}

这个例子非常基础,仅适用于静态页面或作为概念演示。在实际项目中,你可能会使用MVVM框架(如Vue.js或React.js)来管理状态和DOM操作,这会更加高效且易于维护。此外,如果涉及到多行数据编辑,你可能需要根据data-id或其他标识符动态地找到对应行进行更新,并考虑如何更好地组织和复用代码。

有帮助
无帮助
AI 助理回答生成答案可能存在不准确,仅供参考
0 条回答
写回答
取消 提交回答
问答地址:
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等