table中点击按钮弹出模态框,获取table中点击的按钮所在行的数据

本文介绍如何在使用Bootstrap制作的HTML5页面中,通过模态框进行数据操作。重点讲解了如何在模态框打开时,从表格中获取特定行的数据ID,以便向服务器传递参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在弄bootstrap做前端html5页面,其中有用到表格。
表格中有一列数据是按钮增删数据的操作,需要弹出bootstrap的模态框用来操作。
操作的逻辑是向服务端传递id值,所以就需要去获取该行数据id一列的值。
所以就有这个问题,就是再弹出模态框后,获取点击弹出模态框按钮所在的数据。

可以看下table,需要通过点击操作栏,获取到序号列传给服务器操作。
在这里插入图片描述
模态框代码

    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModalRefuse" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h5 class="modal-title" id="myModalLabel">拒绝申请</h5>
                </div>
                <div class="modal-body">
                    请输入拒绝申请的原因<span style="color:red">*</span><br>
                    <textarea name="refuseTextareaContext" rows="10" cols="30"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" id="btnRefuseSave" class="btn btn-primary" data-dismiss="modal">
                        保存
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

table tbody是在js中写的,就不贴了。

主要看js中的操作:

$('#myModalRefuse').on('show.bs.modal', function (event) {
            $("textarea[name = refuseTextareaContext]").innerHTML = "";
            var btnThis = $(event.relatedTarget); //触发事件的按钮
            var modal = $(this);  //当前模态框
            var modalId = btnThis.data('id');   //解析出data-id的内容
            currentDataId = btnThis.closest('tr').find('td').eq(1).text();//获取某一列的内容eq后面表示列数
            ///alert("show.bs.modal  modalId = " + modalId + ", currentDataId = " + currentDataId);
        });

myModalRefuse表示模态框的id,on是模态框将要显示前的监听事件。
var btnThis = $(event.relatedTarget);这一行就是获取点击出现这个模态框的那个按钮。
btnThis.closest(‘tr’).find(‘td’).eq(1).text(); 获取按钮所在行tr再去找列td,eq表示是第几列,然后获取到text内容。
这样就接触了这个问题了。

<think>好的,我现在需要帮用户解决在JavaFX中点击按钮弹出子页面,存储数据数据库,关闭子页面后刷新主界面的问题。首先,我得理清楚整个流程。 用户的需求分几个步骤:点击按钮打开弹出页面,输入数据并保存到数据库,关闭弹出页面后,主界面自动查询数据库并刷新显示。我需要考虑如何实现弹窗、数据存储、以及关闭弹窗后的刷新机制。 首先,弹窗页面通常可以用Stage来实现,作为模态窗口,这样主窗口在弹窗关闭前无法操作。然后,数据存储部分需要数据库操作,比如使用JDBC或者ORM框架,比如Hibernate。不过用户可能希望一个简单的示例,所以先用JDBC示范。 接下来,关闭子页面后刷新主界面,这里涉及到窗口间通信。可能的方法包括在子窗口关闭时触发主窗口的刷新方法,或者使用事件监听机制。比如,主窗口监听子窗口的关闭事件,一旦关闭,就执查询和刷新操作。 另外,JavaFX中的控件布局和事件处理需要正确设置。按钮的事件处理器里创建新的Stage,设置Scene,并显示。子窗口可能需要传递主窗口的引用,以便在关闭时调用主窗口的方法。 数据库操作部分需要确保在后台线程执,避免阻塞UI线程,否则界面会卡顿。JavaFX的Service和Task类可以用来处理后台任务,更新UI则通过Platform.runLater()方法。 现在,我需要把这些步骤整合成一个连贯的示例代码。可能的结构是: 1. 主界面有一个按钮和一个TableView用于显示数据。 2. 点击按钮打开子窗口,输入数据点击保存,将数据插入数据库。 3. 子窗口关闭后,主窗口自动刷新表格数据。 在代码中,主窗口的控制器需要有一个刷新数据的方法,比如refreshTable(),该方法从数据库读取最新数据并更新TableView。子窗口的控制器在保存数据后关闭窗口,并通知主窗口刷新。 关于窗口间的通信,可以使用回调函数或者传递主控制器实例到子控制器中。例如,当创建子窗口时,将主控制器的引用传递给子控制器,这样在保存数据后,子控制器可以调用主控制器的refreshTable()方法。 还需要处理异常情况,比如数据库连接失败,或者输入数据验证。但用户可能首先需要一个基础实现,后续再考虑优化。 最后,确保代码符合JavaFX的最佳实践,比如使用FXML加载界面,分离逻辑和视图。不过用户可能希望一个简洁的示例,所以可能会用纯代码的方式,或者混合FXML。 总结步骤: 1. 主界面布局,包含按钮表格。 2. 按钮点击事件打开子窗口。 3. 子窗口输入数据,保存到数据库。 4. 子窗口关闭时触发主界面刷新。 5. 主界面查询数据库并更新表格。 现在需要将这些写成代码示例,并解释每一步的关键点,比如Stage的模态设置,数据库操作,线程处理,以及刷新机制。</think>在JavaFX中实现点击按钮弹出子页面存储数据,并在关闭后刷新主界面,可以按照以下步骤进: ### 一、实现步骤 1. **主界面搭建** 使用`TableView`展示数据,`Button`触发弹窗操作 2. **弹窗页面创建** 新建`Stage`设置为模态窗口,包含数据输入控件和提交按钮 3. **数据库交互** 使用JDBC实现数据存储功能,建议在独立线程中执 4. **刷新机制** 通过窗口关闭监听事件触发主界面数据刷新 ### 二、核心代码示例 ```java // 主界面控制器 public class MainController { @FXML private TableView<DataModel> dataTable; // 初始化时加载数据 public void initialize() { refreshTable(); } // 打开弹窗事件 @FXML private void openPopup() throws IOException { FXMLLoader loader = new FXMLLoader(getClass().getResource("popup.fxml")); Parent root = loader.load(); // 获取子控制器并设置回调 PopupController popupController = loader.getController(); popupController.setRefreshCallback(this::refreshTable); Stage stage = new Stage(); stage.initModality(Modality.APPLICATION_MODAL); stage.setScene(new Scene(root)); stage.showAndWait(); } // 刷新表格数据 public void refreshTable() { Task<List<DataModel>> task = new Task<>() { @Override protected List<DataModel> call() throws Exception { return DatabaseUtil.queryData(); // 数据库查询方法 } }; task.setOnSucceeded(e -> { dataTable.getItems().setAll(task.getValue()); }); new Thread(task).start(); } } // 弹窗控制器 public class PopupController { private Runnable refreshCallback; public void setRefreshCallback(Runnable callback) { this.refreshCallback = callback; } @FXML private void saveData() { // 创建后台任务 Task<Void> task = new Task<>() { @Override protected Void call() throws Exception { DatabaseUtil.saveData(...); // 数据库存储方法 return null; } }; // 设置成功回调 task.setOnSucceeded(e -> { ((Stage) submitButton.getScene().getWindow()).close(); if(refreshCallback != null) { Platform.runLater(refreshCallback); } }); new Thread(task).start(); } } ``` ### 三、关键技术点 1. **模态窗口** 使用`stage.initModality(Modality.APPLICATION_MODAL)`确保弹窗获得焦点[^2] 2. **线程安全** 数据库操作在`Task`中执,UI更新通过`Platform.runLater()`实现 3. **回调机制** 通过函数式接口实现子窗口到主窗口的通信 4. **数据绑定** TableView应使用`ObservableList`实现自动刷新 ### 四、数据库工具类示例 ```java public class DatabaseUtil { public static void saveData(DataModel data) throws SQLException { String sql = "INSERT INTO table_name (...) VALUES (...)"; try (Connection conn = DriverManager.getConnection(DB_URL); PreparedStatement pstmt = conn.prepareStatement(sql)) { // 设置参数... pstmt.executeUpdate(); } } public static List<DataModel> queryData() { // 实现查询逻辑... } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值