jquery操作tr

<div class="form-group" style="margin-bottom:10px;">
    <label for="title">日规则</label>
    <a class="btn btn-info btn-xs" href="javascript:;" id="addtr1" style="float: right;margin-right: 20px;" role="button">添加</a>
    <div class="col-md-12">
        <table id="rule_table1" class="table table-hover table-bordered">
            <thead>
            <tr>
                <th>发帖天数</th>
                <th>发帖间隔</th>
                <th>每天发帖数</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {if !empty($ruleInfo['rule1'])}
                {foreach key=key item=item from=$ruleInfo['rule1']}
                    <tr id="rule1_{$key+1}">
                        <td>
                            <div class="form-group form-inline">
                                第<input type="text" name="day1[]" value="{$item['day']}" class="form-control">天
                            </div>
                        </td>
                        <td>
                            <div class="form-group form-inline">
                                <input type="text" name="stime1[]" value="{$item['stime']}" class="form-control">
                                --
                                <input type="text" name="etime1[]" value="{$item['etime']}" class="form-control">
                            </div>
                        </td>
                        <td>
                            <div class="form-group form-inline">
                                <input type="text" name="num1[]" value="{$item['num']}" class="form-control">
                            </div>
                        </td>
                        <td>
                            <a href="javascript:;" class="btn btn-info btn-xs" οnclick="del_tr('rule1_{$key+1}')">
                                <i class="fa fa-pencil"></i>删除
                            </a>
                        </td>
                    </tr>
                {/foreach}
            {else}
                <tr id="rule1_1">
                    <td>
                        <div class="form-group form-inline">
                            第<input type="text" name="day1[]" value="" class="form-control">天
                        </div>
                    </td>
                    <td>
                        <div class="form-group form-inline">
                            <input type="text" name="stime1[]" value="" class="form-control">
                            --
                            <input type="text" name="etime1[]" value="" class="form-control">
                        </div>
                    </td>
                    <td>
                        <div class="form-group form-inline">
                            <input type="text" name="num1[]" value="" class="form-control">
                        </div>
                    </td>
                    <td>
                        <a href="javascript:;" class="btn btn-info btn-xs" οnclick="del_tr('rule1_1')">
                            <i class="fa fa-pencil"></i>删除
                        </a>
                    </td>
                </tr>
            {/if}

            </tbody>
        </table>
    </div>
</div>

<script src="/static/gentelella/vendors/jquery/dist/jquery.min.js"></script>
<script>

    $(function () {
        // 添加 单行控件
        $('#addtr1').on('click', function(){
            let randNum=Math.round(Math.random()*10000);
            const length = $('#rule_table1 tr').length;
            var html = '<tr id="rule1_'+length+'_'+randNum+'">';
            html += '<td><div class="form-group form-inline">第<input type="text" name="day1[]" value="" class="form-control form-inline">天</td></div>';
            html += '<td><div class="form-group form-inline"><input type="text" name="stime1[]" value=""  class="form-control"> -- <input type="text" name="etime1[]" value="" class="form-control"></td></div>';
            html += '<td><div class="form-group form-inline"><input type="text" name="num1[]" value="" class="form-control"></td></div>';
            html += '<td><a href="javascript:;" class="btn btn-info btn-xs" οnclick="del_tr(\'rule1_'+length+'_'+randNum+'\')"><i class="fa fa-pencil"></i>删除</a></td>';
            html += '</tr>';
            $('#rule_table1').append( html );
        });

    });

    function del_tr(trid) {
        $('#'+trid).remove();
    }
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值