1

出于某种原因，我有 2 个表，具有相同的编码（不同的标识符），但功能相同，只有 1 个有效。

我无法让第一张桌子正确响应。甚至自己。我很混乱。

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>

脚本

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');
    }
});

链接到 FIDDLE 演示

它必须像我所有其他帖子一样愚蠢，但我就是看不到它。:(

4

1 回答 1

1

更改您的代码

这个

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

至

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

因为您已经在输入名称上应用了事件，但您没有在第一个表中包含输入名称，而是您在其上有id所以将id更改为name属性

小提琴

于 2013-11-13T07:48:13.967 回答