CODEWITHSUNDEEP
javascriptjqueryhtml
Jasonson
Jasonson

Reputation: 33

Jquery dynamic table not working

For some reason, i have 2 tables, with identical coding (different identifiers) but the functions are the same and only 1 works.

I cannot get the first table to respond properly. Even by itself. I'm so confused.

HTML

<table class="tblTradesman">
<tr>
    <th>Name:</th>
    <th>Arrive: (hh:mm)</th>
    <th>Leave: (hh:mm)</th>
</tr>
<tr>
    <td><input type="text" id="txtTradesman" /></td>
    <td><input type="text" id="txtArrive" /></td>
    <td><input type="text" id="txtLeave" /></td>
    <td><a class="deleteRow"> &nbsp; X </a></td>
</tr>
</table>
<br>
<hr/>
<br>
<table class="tblMaterials">
<tr>
    <th>Brand:</th>
    <th>Description: (part #)</th>
    <th>QTY:</th>
</tr>
<tr>
    <td><input type="text" cols="12" name="txtMatBrand" /></td>
    <td><input type="text" cols="25" name="txtMatDesc" /></td>
    <td><input type="text" cols="4" name="txtMatQty" /></td>
    <td><a class="deleteRow"> &nbsp; X </a></td>
</tr>
</table>

SCRIPTS

var tblTradeCounter = 1;

jQuery("table.tblTradesman").on('change','input[name^="txtTradesman"]',function(event){
event.preventDefault();
alert('clicked');
tblTradeCounter++;
var newMan = jQuery('<tr><td><input type="text" name="txtTradesman' +
tblTradeCounter + '"/></td><td><input type="text" name="txtArrive' +
tblTradeCounter + '"/></td><td><input type="text" name="txtLeave' + tblTradeCounter +'"/></td><td><a class="deleteRow"> &nbsp; X </a></td></tr>');
jQuery('table.tblTradesman').append(newMan);
});

jQuery("table.tblTradesman").on('click','.deleteRow',function(event){
if ($(this).parents('table').find('tr').length >  2) { 
    $(this).closest('tr').remove();
}else{
    alert ('There must be 1 tradesperson assigned to this job.');
}
});

var tblMatCounter = 1;

jQuery("table.tblMaterials").on('change','input[name^="txtMatBrand"]',function(event){
    event.preventDefault();
    tblMatCounter++;
var newMat = jQuery('<tr><td><input type="text" name="txtMatBrand' +
    tblMatCounter + '"/></td><td><input type="text" name="txtMatDesc' +
    tblMatCounter + '"/></td><td><input type="text" name="txtMatQty' + tblMatCounter +'"/></td><td><a class="deleteRow"> &nbsp; X </a></td></tr>');
jQuery('table.tblMaterials').append(newMat);
});

jQuery('table.tblMaterials').on('click','.deleteRow',function(event){
    if ($(this).parents('table').find('tr').length >  2) { 
        $(this).closest('tr').remove();
    }else{
        alert ('You cannot delete this row of materials');
    }
});

Link to FIDDLE Demo

It has to be something stupid like all my other posts but i just cannot see it. :(

Upvotes: 1

Views: 210

Answers (1)

rajesh kakawat
rajesh kakawat

Reputation: 10896

Change your code from

this

 <input type="text" id="txtTradesman" />

to

  <input type="text" name="txtTradesman" />

Because you have applied event on input name but you have not included name of input on your first table,instead you have id on it so change id to name attribute

FIDDLE

Upvotes: 1

Related Questions