Question

出于某种原因，我有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>

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

它必须像我所有其他帖子一样愚蠢，但我只是看不到它。：（

Answer 1

从

更改您的代码

：此

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

到

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

因为您已在输入名称上应用了事件，但您没有在第一个表格中添加输入名称，而是在其上有 id ，因此将 id 更改为名称属性

<强> FIDDLE

Jquery动态表不起作用

1 个答案: