JEditableTable给必填项列名添加*号

思路:

先给所有的列名增加*号,再将不是必填项的列名content设置为空。

//先根据表格结构都给列名增加 content *
/deep/ .thead .tr .td span::before{
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}
// 再将不是必填项的列名 content设为 空
/deep/ .thead .tr .td:first-child {
  span::before{
    content: '';
  }
}
/deep/ .thead .tr .td:nth-child(5) {
  span::before{
    content: '';
  }
}

小伙伴有更好方法可以再评论区讨论~

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JEditableTable是一款jQuery插件,可实现可编辑的表格。要嵌套子表格,可以使用以下步骤: 1. 为主表格添加一个列,用于触发展开子表格的事件。例如,可以在每一行的最后一列添加一个“+”按钮。 2. 在子表格中添加与主表格中的行数据相关的数据。 3. 使用jQuery的事件委托机制,在主表格中绑定点击事件来展开或关闭子表格。 4. 使用jQuery的ajax方法,从服务器获取子表格数据,并将其添加到相应的主表格行中。 以下是一个示例代码: HTML: ``` <table id="mainTable"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td><button class="expandBtn">+</button></td> </tr> <tr> <td>李四</td> <td>20</td> <td><button class="expandBtn">+</button></td> </tr> </tbody> </table> ``` JavaScript: ``` $(function() { // 绑定点击事件 $('#mainTable').on('click', '.expandBtn', function() { var tr = $(this).closest('tr'); var row = $('#mainTable').DataTable().row(tr); if (row.child.isShown()) { // 关闭子表格 row.child.hide(); tr.removeClass('shown'); } else { // 展开子表格 var data = row.data(); var childTable = '<table><thead><tr><th>课程</th><th>成绩</th></tr></thead><tbody><tr><td>语文</td><td>90</td></tr><tr><td>数学</td><td>80</td></tr></tbody></table>'; row.child(childTable).show(); tr.addClass('shown'); } }); }); ``` 在这个示例代码中,我们使用了DataTables插件来处理表格数据,并使用了Bootstrap样式来美化表格。在展开子表格时,我们手动创建了一个新的表格,并将其添加到主表格行中。实际应用中,您可以使用ajax方法从服务器获取子表格数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值