SpringBoot中获取按钮值及点击表格行时控制台打印行值的方法

我来帮你搞定这两个问题，结合你给出的Thymeleaf代码片段，咱们一步步拆解：

这里分两种常用场景来实现：

场景一：表单同步提交 #

给你的按钮加上name和value属性，同时如果需要传递对应任务的ID，可以在表单里加个隐藏域，这样后端就能拿到按钮值和对应任务的信息了。

修改你的表单代码：

<form th:action="@{RunJob}" method="POST" class="form-horizontal" id="RunScriptJob">
  <!-- 隐藏域传递任务ID -->
  <input type="hidden" name="taskId" th:value="${taskJob.id}">
  <!-- 给按钮加name和value -->
  <button type="submit" name="action" value="runJob">运行任务</button>
</form>

然后在SpringBoot的Controller里，用@RequestParam接收参数：

@PostMapping("/RunJob")
public String handleRunJob(@RequestParam("action") String buttonValue, 
                           @RequestParam("taskId") Long taskId) {
    // 这里就能拿到按钮的值和对应的任务ID了
    System.out.println("点击的按钮值：" + buttonValue);
    System.out.println("对应的任务ID：" + taskId);
    // 后续处理逻辑...
    return "redirect:/your-task-page"; // 跳回任务列表页
}

场景二：AJAX异步提交（不刷新页面） #

如果不想页面刷新，可以用JavaScript监听按钮点击，异步把参数传给后端。

先修改按钮（可以加个自定义属性存任务ID）：

<button type="button" class="run-btn" th:attr="data-task-id=${taskJob.id}" value="runJob">运行任务</button>

然后添加JavaScript代码：

// 获取所有运行按钮
const runButtons = document.querySelectorAll('.run-btn');

runButtons.forEach(btn => {
    btn.addEventListener('click', function(e) {
        const buttonValue = this.value;
        const taskId = this.getAttribute('data-task-id');
        
        // 发送POST请求给后端
        fetch('/RunJob', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `action=${buttonValue}&taskId=${taskId}`
        })
        .then(response => response.text())
        .then(data => {
            console.log('后端响应：', data);
            // 这里可以加成功后的提示，比如弹窗
        })
        .catch(error => console.error('请求出错：', error));
    });
});

后端的Controller代码和场景一一样，用@RequestParam接收参数即可。

针对你的Thymeleaf表格，我们可以给每行绑定点击事件，然后提取行内的单元格内容打印到控制台。

首先给表格行加个类名，方便JavaScript选择：

<tbody>
  <tr th:each="taskJob : ${theTaskSchJobList}" style="text-align: center" class="task-row">
    <td th:text="${taskJob.id}" class="task-id">Id</td>
    <td th:text="${taskJob.title}" class="task-title">任务标题</td>
    <td th:text="${taskJob.script}" class="task-script">脚本内容</td>
    <td>
      <!-- 这里是你的按钮/表单 -->
      <form th:action="@{RunJob}" method="POST" class="form-horizontal" id="RunScriptJob">
        <button type="submit" name="action" value="runJob">运行任务</button>
      </form>
    </td>
  </tr>
</tbody>

然后添加JavaScript代码监听行点击：

// 获取所有任务行
const taskRows = document.querySelectorAll('.task-row');

taskRows.forEach(row => {
    row.addEventListener('click', function() {
        // 提取该行的各个数值
        const taskId = this.querySelector('.task-id').textContent.trim();
        const taskTitle = this.querySelector('.task-title').textContent.trim();
        const taskScript = this.querySelector('.task-script').textContent.trim();
        
        // 打印到控制台
        console.log('你点击的行信息：');
        console.log(`任务ID：${taskId}`);
        console.log(`任务标题：${taskTitle}`);
        console.log(`脚本内容：${taskScript}`);
    });
});

小提示：避免按钮触发行事件 #

如果点击行内的按钮时，不想同时触发行的点击事件，可以给按钮加个阻止事件冒泡的代码：

document.querySelectorAll('#RunScriptJob button').forEach(btn => {
    btn.addEventListener('click', function(e) {
        e.stopPropagation(); // 阻止事件冒泡到父元素（行）
    });
});

这样点击按钮时就只会执行按钮自己的逻辑，不会触发行的点击事件啦。

内容的提问来源于stack exchange，提问作者Amir Asyraf