关于#layui#的问题：html文件里a标签运行后应该是一个可点的修改链接(开发工具-pycharm)

Question

在pycharm里用flask、layui编写，html文件里a标签运行后应该是一个可点的修改链接，可是直接代码展现出来了，但写在table外面的话就正常了。问题出在哪里

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

根据描述，问题应该在于在表格内部使用 a 标签时，链接的部分没有被正确渲染为可点的修改链接。解决方案如下：

1. 确认 layui 的版本是否正确，最好使用最新版本。

2. 将 a 标签的 href 属性的值修改为 javascript:void(0)，使其不跳转页面。

3. 使用 layui 的 table 模块提供的自定义列来实现修改链接的展示，示例代码如下：

   <th lay-data="{field:'option', align:'center', templet:'#optionTpl'}">操作</th>
   

4. 在 html 文件的结尾处添加模板代码，示例代码如下：

   <script type="text/html" id="optionTpl">
       <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
   </script>
   

5. 在 JS 文件中处理相关的事件，示例代码如下：

   // 监听工具条
   table.on('tool(demo)', function(obj){
       var data = obj.data;
       if(obj.event === 'edit'){
           // 执行修改操作
       }
   });
   

修改后的部分代码如下所示：

<table lay-filter="demo">
    <thead>
        <tr>
            <th lay-data="{field:'name'}">姓名</th>
            <th lay-data="{field:'class'}">积分</th>
            <th lay-data="{field:'english'}">英语成绩</th>
            <th lay-data="{field:'chinese'}">语文成绩</th>
            <th lay-data="{field:'math'}">数学成绩</th>
            <th lay-data="{field:'option', align:'center', templet:'#optionTpl'}">操作</th>
        </tr>
    </thead>
    <tbody>
        {%for stu in stu_.list%}
        <tr>
            <td>{{stu.name }}</td>
            <td>{{stu.class }}</td>
            <td>{{stu.english }}</td>
            <td>{{stu.chinese }}</td>
            <td>{{stv.math }}</td>
            <td>
                <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<script type="text/html" id="optionTpl">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
</script>

<script>
    // 监听工具条
    table.on('tool(demo)', function(obj){
        var data = obj.data;
        if(obj.event === 'edit'){
            // 执行修改操作
        }
    });
</script>