Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Table -->
                                            <div class="container">
                                                <div class="row clearfix">
                                                    <div class="col-md-12 column">
                                                        <div class="table-wrapper">
                                                            <div class="table-scroll">
                                                                <table class="table table-bordered" id="tab_logic">
                                                                    <thead>
                                                                        <tr style="background-color: #680779; color: #fff;">
                                                                            <th style="min-width: 80px;">
                                                                                #
                                                                            </th>
                                                                            <th style="min-width: 80px;">
                                                                                S.no
                                                                            </th>
                                                                            <th class="text-center">
                                                                                Item Name
                                                                            </th>
                                                                            <th class="text-center">
                                                                                Item Code
                                                                            </th>
                                                                            <th style="min-width: 350px;">
                                                                                Description
                                                                            </th>
                                                                            <th style="min-width: 140px;">
                                                                                UOM
                                                                            </th>
                                                                            <th style="min-width: 140px;">
                                                                                Quantity
                                                                            </th>
                                                                            <th style="min-width: 140px !important;">
                                                                                Action
                                                                            </th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody id="tableBody">
                                                                        <tr class="first" row-number="0" style="padding-bottom: 20%;">
                                                                            <td style="min-width: 80px;">
                                                                                 <input type="checkbox" class="led-btn checkNew" name="selpoNO" id="selpoNO" value="PO" style="width: 13px;">
                                                                            </td>
                                                                            <td style="min-width: 80px;">
                                                                                <input type="number" value="1" id="serialNo" class="form-control" name="serialNo" placeholder="S.No" readonly/>
                                                                            </td>
                                                                            <td class="common_td">
                                                                                <select class="form-control newRw3 clrRow sel_text" id="it_name1" name="it_name">
                                                                                  <option value="">Choose an items</option>
                                                                                  <option value="1">100</option>
                                                                                  <option value="2">200</option>
                                                                                  <option value="3">300</option>
                                                                                  <option value="4">400</option>
                                                                                  <option value="5">500</option>
                                                                                </select>
                                                                            </td>
                                                                            <td class="common_td">
                                                                                <select class="form-control" id="it_code1" name="it_code1">
                                                                                    <option value="">Choose item code</option>
                                                                                    <option value="1">100</option>
                                                                                    <option value="2">200</option>
                                                                                    <option value="3">300</option>
                                                                                    <option value="4">400</option>
                                                                                    <option value="5">500</option>
                                                                                  </select>
                                                                            </td>
                                                                            <td style="min-width: 350px;">
                                                                                <input type="text" id="it_desc1" class="form-control" name="it_desc" placeholder="Item Description" />
                                                                            </td>
                                                                            <td style="min-width: 140px;">
                                                                                <input type="text" id="uomTable1" class="form-control newRw3 clrRow sel_text required" name="uomTable" placeholder="Enter Uom in kg" />
                                                                            </td>
                                                                            <td style="min-width: 140px;">
                                                                                <input type="text" id="qty1" name="qty" class="form-control" placeholder="Quantity" />
                                                                            </td>
                                                                            <td style="min-width: 140px !important;">
                                                                                <input type="button" class="dlRow" id="total1" value="Add" onclick="createTable();">
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Second table -->
                                            <div class="container">
                                                <div class="row clearfix">
                                                    <div class="col-md-12 column">
                                                        <div class="table-wrapper">
                                                            <div class="table-scroll">
                                                                <table class="table table-bordered" id="tab_logic2">
                                                                    <thead>
                                                                        <tr style="background-color: #680779; color: #fff;">
                                                                            <th style="min-width: 80px;">
                                                                                S.no
                                                                            </th>
                                                                            <th style="min-width: 140px;">
                                                                                Requistition No
                                                                            </th>
                                                                            <th style="min-width: 140px;">
                                                                                Item Name
                                                                            </th>
                                                                            <th style="min-width: 140px;">
                                                                                Item Code
                                                                            </th>
                                                                            <th style="min-width: 350px;">
                                                                                Description
                                                                            </th>
                                                                            <th style="min-width: 140px;">
                                                                                UOM
                                                                            </th>
                                                                            <th style="min-width: 140px;">
                                                                                Quantity
                                                                            </th>
                                                                            <th style="min-width: 140px;">
                                                                                Action
                                                                            </th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody id="myNewtbody">
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
 
// Create New table
        var counter = -1;
        window.updateIds = function() {
            $.each($("[row-number]"), function(index, item) {
                $(this).attr("row-number", (index - 1));
                $("[id^=itemNo]", $(this)).attr("id", "itemNo" + (index - 1));
            });
        }
        window.createTable = function() {
            counter++;
            var itemNo = document.getElementById("serialNo").value;
            var itemName = $("#it_name1 option:selected").text();
            // var itemCode = document.getElementById("it_code1").value;
            var itemCode = $("#it_code1 option:selected").text();
            var description = document.getElementById("it_desc1").value;
            var itemUom = document.getElementById("uomTable1").value;
            var qty = document.getElementById("qty1").value;
            // var reqNo = document.getElementById("reqNo1").value;
            var reqNo = $("#reqNo1 option:selected").text();
            $('#totalRowCount').text(counter - 0);
            var htmlText = '';
            htmlText += '<tr class="first" row-number="' + counter + '">';
            htmlText += '<td class="itemNumber" style="min-width: 80px;">';
            htmlText += '<input type="checkbox" class="led-btn checkNew" name="selpoNO[' + counter + '].valu" id="selpoNO' + counter + '" style="width: 13px;">';
            htmlText += '</td>';
            htmlText += '<td class="itemNumber" style="min-width: 80px;">';
            htmlText += '<input type="text" id="itemNo' + counter + '" class="form-control" name="serialNo[' + counter + '].valu" value="' + itemNo + '" readonly>';
            htmlText += '</td>';
            htmlText += '<td>';
            htmlText += '<select class="form-control" id="itemName' + counter + '">';
            htmlText += '<option>' + itemName + '</option>';
            htmlText += '</select>';
            htmlText += '</td>';
            htmlText += '<td>';
            htmlText += '<select class="form-control" id="itemCode' + counter + '">';
            htmlText += '<option>' + itemCode + '</option>';
            htmlText += '</select>';
            htmlText += '</td>';
            htmlText += '<td class="itemNumber">';
            htmlText += '<input type="text" id="itemDescript' + counter + '" placeholder="Description" class="form-control" placeholde="Description" name="" value="' + description + '">';
            htmlText += '</td>';
            htmlText += '<td class="itemNumber" style="min-width: 140px;">';
            htmlText += '<input type="text" id="itemUom' + counter + '" class="form-control" placeholder="Enter Uom in kg" name="" value="' + itemUom + '">';
            htmlText += '</td>';
            htmlText += '<td class="itemNumber" style="min-width: 140px;">';
            htmlText += '<input type="text" id="qty' + counter + '" class="form-control" name="" placeholder="Quantity" value="' + qty + '">';
            htmlText += '</td>';
            // htmlText += '<td class="itemNumber">';
            // htmlText += '<input type="text" id="itemAval' + counter + '" class="form-control" name="" value="' + itemAval + '">';
            // htmlText += '</td>';
            htmlText += '<td class="itemNumber" style="min-width: 140px !important;">';
            htmlText += '<button type="button" class="dlRow del"><i onclick="deleteRows();">Delete</button></i>';
            htmlText += '</td>';
            htmlText += '</tr>';
            htmlText += '</tbody>';
            htmlText += '</table>';
            $('#tableBody').append(htmlText);
            var sum = 0;
            $('.tAmount').each(function() {
                sum += parseFloat($(this).val());
            });
            $('#grandTotal').val(sum);
            updateIds();
            removeStaticVal();
        }
        // Delete rows
        window.deleteRows = fdeleteRows = function() {
            $('.del').click(function() {
                $(this).parent().parent().remove();
                var sum = 0;
                $('.tAmount').each(function() {
                    sum += parseFloat($(this).val());
                });
                $('#grandTotal').val(sum);
                updateIds();
            });
        }
        
        
        
// table checkbox function
        
         $(".checkNew").on("click", function() {
            if ($(this).is(":checked")) {
                alert("if");
                // $(this).closest("td").siblings("td").each(function() {
                $(this).closest('tr').find(".checkNew").each(function() {
                    // $("#tab_logic2 tbody").append($(this).text());
                    alert('executed');
                    var sno = $(this).closest('tr').find("td:eq(1) input").val();
                    var iName = $(this).closest('tr').find("td:eq(2) input").val();
                    var iCode = $(this).closest('tr').find("td:eq(3) input").val();
                    var iDect = $(this).closest('tr').find("td:eq(4) input").val();
                    var iUom = $(this).closest('tr').find("td:eq(5) input").val();
                    var iQty = $(this).closest('tr').find("td:eq(6) input").val();
                    $("#tab_logic2 tbody").append('<tr><td style="min-width: 80px;"><input type="text" id="sm_supp" value="' + sno + '" class="form-control newStyle1" name="sm_supp" readonly></td><td style="min-width: 140px;"><select class="form-control" id="iReqNo" name="iReqNo"><option>Choose Requitition no</option></select></td><td style="min-width: 140px;"><select class="form-control" id="inames" name="inames" value="' + iName + '"><option>Choose Item name</option></select></td><td style="min-width: 140px;"><select class="form-control" id="icode" name="icode" value="' + iCode + '"><option>Choose Item code</option></select></td><td style="min-width: 350px;"><input type="text" id="" value="' + iDect + '" class="form-control" name="sm_code" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iUom + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iQty + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><button type="button" class="dlRow del">x</button></a></td></tr>');
                });
            } else {
                alert('else section');
                $("#tab_logic2 tbody").html("");
                // $(":checkbox:checked").closest("td").siblings("td").each(function() {
                $(this).closest('tr').find("td:eq(0) .checkNew").each(function() {
                    $("#tab_logic2 tbody").append('<tr><td style="min-width: 80px;"><input type="text" id="sm_supp" value="' + sno + '" class="form-control newStyle1" name="sm_supp" readonly></td><td style="min-width: 140px;"><select class="form-control" id="iReqNo" name="iReqNo"><option>Choose Requitition no</option></select></td></td><td style="min-width: 140px;"><select class="form-control" id="inames" name="inames" value="' + iName + '"><option>Choose Item name</option></select></td><td style="min-width: 140px;"><select class="form-control" id="icode" name="icode" value="' + iCode + '"><option>Choose Item code</option></select></td><td style="min-width: 350px;"><input type="text" id="" value="' + iDect + '" class="form-control" name="sm_code" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iUom + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><input type="text" id="" value="' + iQty + '" class="form-control" name="" readonly></td><td style="min-width: 140px;"><button type="button" class="dlRow del">x</button></a></td></tr>');
                });
            }
        });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
joe3776pro
0viewers