Gautam Singh Blog For Web Tutorials: add row with sub child row

<!DOCTYPE html>
<html>
<head>
   <title>add row</title>
    <script type="text/javascript" src="multiple/jquery.min.js"></script>
</head>
<body>
<button onclick="main()">Pick</button>
<button onclick="del()">Delete</button>
<table>
   <thead>
        <tr>
            <th>select</th>
            <th>Item</th>
            <th>Sub Item</th>
        </tr>
    </thead>
    <tbody id="tbl">
        <tr>
            <td><input data-child="0" type="checkbox" name="ids[1]" id="ids_1"></td>
            <td><input type="text" name="item[1]" id="item_1"></td>
            <td>
                <input type="text" name="subitem[1]" id="subitem_1">
                <button onclick="sub(this.id)" id="pick_1">Pick Item</button>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>
<script type="text/javascript">
    function del() {
        if(parseInt($('#tbl input[type="checkbox"]:checked').length)>0){
            var selectedCheckbox=$('#tbl input[type="checkbox"]:checked');
            $.each(selectedCheckbox,function(index,val){
                if(parseInt($(val).attr('data-child'))>0){
                    var idArr=$(val).attr('id').split('_');
                    $('input[id^="ids_'+idArr[1]+'_"]').closest('tr').remove();
                } else {
                    $(val).closest('tr').remove();
                }
            });
        } else {
            alert('please select checkbox');
        }
        $('#tbl input[type="checkbox"]:checked').closest('tr').remove();
    }
    function main() {
        var trToCopy=$('#tbl tr:first').clone();
        var lastIdArr=$('#tbl tr:last td:first input').attr('id').split('_');
        var newId=parseInt(lastIdArr[1])+1;
        $('#tbl tr:last').after(trToCopy);
        var ids=$('#tbl tr:last [id]').after();
        $.each(ids,function(index,val){
            if($(val).attr('name')){
                var name = $(val).attr('name'),
                    name=name.replace(/\[[0-9]+\]/g, '['+newId+']');
                $(val).attr('name',name);
            }
            var oldId=$(val).attr('id').slice(0,-1);
            $(val).attr('id',oldId+newId);
        });
    }
    function sub(rowId) {
        var arr = [ "ids_", "subitem_"];
        var rowIdArr=rowId.split('_');
        var rowObj=$('#tbl input[type="checkbox"][id="ids_'+rowIdArr[1]+'"]').closest('tr');
        rowObj.after(rowObj.clone());
        var ids=rowObj.next().find('input,select,button');
        var newId=parseInt($('#tbl input[type="checkbox"][id="ids_'+rowIdArr[1]+'"]:first').attr('data-child'))+1;
        $.each(ids,function(index,val){
            var oldId=$(val).attr('id').slice(0,-1);
            if($.inArray(oldId, arr )>=0){
                if($(val).attr('name')){
                    var name = $(val).attr('name');
                    $(val).attr('name',name+'['+newId+']');
                }
                var oldId=$(val).attr('id');
                $(val).attr('id',oldId+'_'+newId);
                $(val).val('');
            } else {
                $(val).remove();
            }
        });
        $('#tbl input[type="checkbox"][id="ids_'+rowIdArr[1]+'"]').attr('data-child',newId);
    }
</script>
Gautam Singh Blog For Web Tutorials

Sunday, February 11, 2018

add row with sub child row

No comments:

Post a Comment

Blog Archive
