CODEWITHSUNDEEP
phpjqueryhtml
Jigna Jain
Jigna Jain

Reputation: 255

Add Delete row in two different table

The rows are getting added in upper table only even though table id is different The functionality shpuld work as I have included different ID for different table Please heklpme to identify the error THE JS is below

$(document).ready(function () {
    $('#myTable').on('click', 'input[type="button"]', function () {
        $(this).closest('tr').remove();
    });
    $('p input[type="button"]').click(function () {
        $('#myTable').append('<tr><td><input type="text" class="form-control"  name="aname[]" value="" placeholder="Input Name" /> </td><td><input type="amount" class="form-control" name="aamount[]" value="" placeholder="Input Value" /></td><td><input type="number" class="form-control" name="apriority[]" value="" placeholder="Input Value" /></td><td><input type="button" class ="btn btn-danger" value="x Delete" /></td></tr>')
    });
    $('#myTable1').on('click', 'input[type="button"]', function () {
        $(this).closest('tr').remove();
    });
    $('p input[type="button"]').click(function () {
        $('#myTable1').append('<tr><td><input type="text" class="form-control"  name="dname[]" value="" placeholder="Input Name" /> </td><td><input type="amount" class="form-control" name="damount[]" value="" placeholder="Input Value" /></td><td><input type="number" class="form-control" name="dpriority[]" value="" placeholder="Input Value" /></td><td><input type="button" class ="btn btn-danger" value="x Delete" /></td></tr>')
    });
});

Below is HTML

<div class="form-group">
    <label for="grade">Grade</label>
   <select class="form-control required alphanum"  name="grade" id="grade" required>
    <option value="">Please select...</option>
    <?php fetch_grade($conn);
    ?>
</select>
</div>                    
<div class="form-group">
    <label for="name">Basic Salary</label>
    <input type="text" name="basic" id="basic"  class="form-control" /> 
</div>
 <div class="form-group">
    <label for="overtime">Overtime Rate(Per Hour)</label>
    <input type="text" name="overtime" id="overtime"  class="form-control" /> 
</div>

Allowances 
            <br>
             <p> <input type="button" class="btn btn-primary" value="+ Add Allowance"></p>
        <table id="myTable" class="table table-condensed table-hover table-bordered table-hover table-responsive table-striped">
            <thead>
                <tr>
                    <th>Allowance Name</th>
                    <th>Amount</th>
                    <th>Display Priority</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="text" class="form-control"  name="aname[]" value="" placeholder="Input Name" /> </td>
                <td><input type="amount" class="form-control" name="aamount[]" value="" placeholder="Input Value" /></td>
                <td><input type="number" class="form-control" name="apriority[]" value="" placeholder="Input Value" /></td>
               <td><input type="button" class ="btn btn-danger" value="x Delete" /></td>
            </tr>
          </tbody>
        </table>

 Deductions 
            <p> <input type="button" class="btn btn-primary" value="+ Add Deduction"></p>
        <table id="myTable1" class="table table-condensed table-hover table-bordered table-hover table-responsive table-striped">
            <thead>
                <tr>
                    <th>Deduction Name</th>
                    <th>Amount</th>
                    <th>Display Priority</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="text" class="form-control"  name="dname[]" value="" placeholder="Input Name" /> </td>
                <td><input type="amount" class="form-control" name="damount[]" value="" placeholder="Input Value" /></td>
                <td><input type="number" class="form-control" name="dpriority[]" value="" placeholder="Input Value" /></td>
               <td><input type="button" class ="btn btn-danger" value="x Delete" /></td>
            </tr>
          </tbody>
        </table>

I am not sure where I am going wrong? I have searched various forum but didnt come with accurate solutions and was wonderingif someone canthrow light on this and how can I optmisie it

Upvotes: 0

Views: 32

Answers (1)

Felippe Duarte
Felippe Duarte

Reputation: 15131

This selector bind some function twice:

$('p input[type="button"]')

which means it will only run for one table.

Add some class to the <p> element

<p class="btnMyTable"> <input type="button"
<p class="btnMyTable1"> <input type="button"

And bind to it:

$('p.btnMyTable input[type="button"]')
$('p.btnMyTable1 input[type="button"]')

Upvotes: 1

Related Questions