Layui表格点击高效获取单元格内容的详细方法与示例

要在Layui中点击表格获取表格中的内容，可以使用以下方法： 1. 首先，确保已经引入了Layui的CSS和JS文件。 2. 创建一个表格，并为其添加一个唯一的ID，例如`tableId`。 3. 在表格的每一行（`<tr>`标签）中，为需要获取内容的单元格添加一个特定的类名，例如`cell-content`。 4. 编写JavaScript代码，监听表格行的点击事件，并在点击时获取对应单元格的内容。以下是一个简单的示例： HTML部分： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Layui 表格点击示例</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/css/layui.css"> </head> <body> <table id="tableId" lay-filter="tableClick"> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td class="cell-content">张三</td> <td class="cell-content">25</td> </tr> <tr> <td class="cell-content">李四</td> <td class="cell-content">30</td> </tr> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js"></script> <script> // 在这里编写JavaScript代码 </script> </body> </html> ``` JavaScript部分： ```javascript layui.use(['table'], function(){ var table = layui.table; table.on('row(tableClick)', function(obj){ var data = obj.data; // 获取当前行的数据对象 var cellContent = data['cell-content']; // 获取指定单元格的内容 console.log(cellContent); // 在控制台输出单元格内容 }); }); ``` 这个示例中，当点击表格的某一行时，会在控制台输出该行中带有`cell-content`类名的单元格的内容。 ######[AI写代码神器 | 602点数解答 | 2024-06-19 19:16:39]

服务商

更多选项

快捷项

自定义