jQuery在table中追加tr和删除tr

jQuery在table中追加tr和删除tr

1. 追加tr

jQuery添加新内容有以下四个方法:
(1) append() - 在被选元素的结尾插入内容（效果如下图：）

(2) prepend() - 在被选元素的开头插入内容（效果如下图：）

(3) after() - 在被选元素之后插入内容（效果如下图：）

(4) before() - 在被选元素之前插入内容（效果如下图：）

2. 删除tr

remove() - 删除被选中元素的内容（效果如下图：）

3. 动态拼接tr实例

$.ajax({
            type: 'POST',
            url: '/flightChangeRecord/queryOrderByOrderNo.in',
            data: {intlOrderNo: intlOrderNo},
            async: true,
            dataType: 'JSON',
            success: function (data) {
                var flightType = $('input[name=flightType]:checked').val();
                $('.flightChange').hide();
                $('.flightCancelled').hide();
                $('.flightData').remove();
                $('.oldFlightNoFlag').val("1");

                var trs = '';
                for (var i = 0; i < data.length; i++) {
                    if(flightType == 1){
                        trs += '<tr class="flightData"><td><input type="hidden" name="recordSegmentVoList['+i+'].intlOrderSegmentId" value="'+data[i].id+'"/>原：</td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldFlightNo" value="'+ data[i].flightNo +'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldDepCode" value="'+data[i].depCode+'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldArrCode" value="'+data[i].arrCode+'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldDepTerm" value="'+data[i].depTerm+'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldArrTerm" value="'+data[i].arrTerm+'"/></td><td><input type="text" readonly="true" style="width: 130px;" name="recordSegmentVoList['+i+'].oldDepDate" value="'+ moment(data[i].depDate).format('YYYY-MM-DD HH:mm:ss')+'"/></td><td><input type="text" readonly="true" style="width: 130px;" name="recordSegmentVoList['+i+'].oldArrDate" value="'+moment(data[i].arrDate).format('YYYY-MM-DD HH:mm:ss')+'"/></td><td><input type="text" readonly="true" style="width: 30px;" name="recordSegmentVoList['+i+'].oldSeatClass" value="'+ data[i].seatClass +'"/></td></tr>';
                        trs += '<tr class="flightData changeFlightData'+i+'"><td><input type="hidden" name="xxx" value="'+i+'"/>新：</td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeFlightNo" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeDepCode" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeArrCode" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeDepTerm" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeArrTerm" value=""/></td><td><input type="text" style="width: 130px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeDepDate" value=""/></td><td><input type="text" style="width: 130px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeArrDate" value=""/></td><td><input type="text" style="width: 30px;" name="recordSegmentVoList['+i+'].recordNewSegmentList[0].changeSeatClass" value=""/></td>';
                        trs += '<td style="border:1px solid white;"><img class="img-btn img-add-btn" src="/images/add-fill.png"/></td></tr>';
                    }else if (flightType == 2) {
                        trs += '<tr class="flightData"><td><input type="checkbox" class="flightChangeCheck" name="recordSegmentVoList['+i+'].intlOrderSegmentId" value="'+data[i].id+'"/>取消：</td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldFlightNo" value="'+ data[i].flightNo +'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldDepCode" value="'+data[i].depCode+'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldArrCode" value="'+data[i].arrCode+'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldDepTerm" value="'+data[i].depTerm+'"/></td><td><input type="text" readonly="true" style="width: 100px;" name="recordSegmentVoList['+i+'].oldArrTerm" value="'+data[i].arrTerm+'"/></td><td><input type="text" readonly="true" style="width: 130px;" name="recordSegmentVoList['+i+'].oldDepDate" value="'+ moment(data[i].depDate).format('YYYY-MM-DD HH:mm:ss')+'"/></td><td><input type="text" readonly="true" style="width: 130px;" name="recordSegmentVoList['+i+'].oldArrDate" value="'+moment(data[i].arrDate).format('YYYY-MM-DD HH:mm:ss')+'"/></td><td><input type="text" readonly="true" style="width: 30px;" name="recordSegmentVoList['+i+'].oldSeatClass" value="'+ data[i].seatClass +'"/></td></tr>';
                    }
                }

                $('.fgroup table').append(trs);

                $('.img-add-btn').click(function () {
                    var indexFlag = $(this).parents('tr').children().eq(0).children().val();
                    debugger;
                    var len = $('.changeFlightData'+indexFlag).length;;
                    if(len === 3){
                        layer.alert('最多只能添加三段航变！');
                        return;
                    }
                    //len = 3 -len;

                    var str = '</br><tr class="flightData changeFlightData'+indexFlag+'"><td><input type="hidden" name="xxx" value="'+indexFlag+'"/>新：</td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeFlightNo" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeDepCode" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeArrCode" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeDepTerm" value=""/></td><td><input type="text" style="width: 100px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeArrTerm" value=""/></td><td><input type="text" style="width: 130px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeDepDate" value=""/></td><td><input type="text" style="width: 130px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeArrDate" value=""/></td><td><input type="text" style="width: 30px;" name="recordSegmentVoList['+indexFlag+'].recordNewSegmentList['+len+'].changeSeatClass" value=""/></td>';
                    str += '<td style="border:1px solid white;"><img class="img-btn img-del-btn" src="/images/del-fill.png"/></td></tr>';
                    $(this).parents('tr').after(str);

                });


                $('.fgroup table').on('click', '.img-del-btn', function() {
                    $(this).parents('tr').remove();
                });

            }
        });