locked
show duplicate value inside table by alert RRS feed

  • Question

  • User-1634604574 posted

    i have this code i want to show duplicate value inside third column by alert

    <table id="myTable" class="order-list">
    <thead>
    <tr>
    <td></td>
    <td></td>
    <td>Name</td>
    <td>Price</td>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td style="text-align: left;">
    <input type="button" class="tdAdd" value="Add Row" />
    </td>
    <td>
    <input type="button" value="Delete" class="ibtnDel" />
    </td>
    <td>
    <input type="text" value="Apple" readonly="readonly" />
    </td>
    <td>
    <input type="text" />
    </td>
    </tr>
    <tr>
    <td style="text-align: left;">
    <input type="button" class="tdAdd" value="Add Row" />
    </td>
    <td>
    <input type="button" value="Delete" class="ibtnDel" />
    </td>
    <td>
    <input type="text" value="Orange" readonly="readonly" />
    </td>
    <td>
    <input type="text" />
    </td>
    </tr>
    <tr>
    <td style="text-align: left;">
    <input type="button" class="tdAdd" value="Add Row" />
    </td>
    <td>
    <input type="button" value="Delete" class="ibtnDel" />
    </td>
    <td>
    <input type="text" name="name1" />
    </td>
    <td>
    <input type="text" name="price1" />
    </td>
    </tr>
    </tbody>
    </table>
    <br />
    <input type="button" value="Save" id= "save">

    $(document).on("click", '.tdAdd', function () {
    var counter = $('#myTable tbody tr').length + 1;
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td><input type="button" value="Add Row" class="tdAdd"/></td>';
    cols += '<td><input type="button" value="Delete" class="tdAdd"/></td>';
    cols += '<td><input type="text" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" name="price' + counter + '"/></td>';
    newRow.append(cols);
    newRow.insertAfter($(this).closest("tr"));
    });

    $("#save").off("click").on("click",function(){
    var existing = [];
    var duplicates = $('#myTable td:nth-child(3) input').filter(function() {
    var value = $(this).val();
    if (existing.indexOf(value) >= 0) {
    return $(this);
    }
    existing.push(value);
    });
    duplicates.closest('tr').css('background-color', 'red');

    alert($('#myTable td:nth-child(3) input').val())

    });

    Sunday, April 21, 2019 4:49 AM

All replies

  • User839733648 posted

    Hi zhyanadil.it@gmail.com,

    According to your description and code,  I suggest that you could use .not(this).each() to check the duplicate value.

    Here is my testing demo.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                $(".tdAdd").on("click", function () {
                    var counter = $('#myTable tbody tr').length + 1;
                    var newRow = $("<tr>");
                    var cols = "";
                    cols += '<td><input type="button" value="Add Row" class="tdAdd"/></td>';
                    cols += '<td><input type="button" value="Delete" class="tdAdd"/></td>';
                    cols += '<td><input type="text" name="name' + counter + '"/></td>';
                    cols += '<td><input type="text" name="price' + counter + '"/></td>';
                    newRow.append(cols);
                    newRow.insertAfter($(this).closest("tr"));
                });
                $("#save").on("click", function () {
                    $('#myTable td:nth-child(3) input').filter(function () {
                        var value = $(this).val();
                        $('#myTable td:nth-child(3) input').not(this).each(function () {
                            if ($(this).val() == value) {
                                alert($(this).val());
                            }
                        }) 
                    });
    
                });
            })
    
        </script>
    </head>
    <body>
        <table id="myTable" class="order-list">
            <thead>
                <tr>
                    <td></td>
                    <td></td>
                    <td>Name</td>
                    <td>Price</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="text-align: left;">
                        <input type="button" class="tdAdd" value="Add Row" />
                    </td>
                    <td>
                        <input type="button" value="Delete" class="ibtnDel" />
                    </td>
                    <td>
                        <input type="text" value="Apple" readonly="readonly" />
                    </td>
                    <td>
                        <input type="text" />
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <input type="button" class="tdAdd" value="Add Row" />
                    </td>
                    <td>
                        <input type="button" value="Delete" class="ibtnDel" />
                    </td>
                    <td>
                        <input type="text" value="Orange" readonly="readonly" />
                    </td>
                    <td>
                        <input type="text" />
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">
                        <input type="button" class="tdAdd" value="Add Row" />
                    </td>
                    <td>
                        <input type="button" value="Delete" class="ibtnDel" />
                    </td>
                    <td>
                        <input type="text" value="Apple" readonly="readonly" />
                    </td>
                    <td>
                        <input type="text" />
                    </td>
                </tr>
            </tbody>
        </table>
        <br />
        <input type="button" value="Save" id="save">
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    Monday, April 22, 2019 3:33 AM