Невозможно получить значение из прилагаемой таблицы td

Question

У меня возникли проблемы с получением входного значения добавленной строки с использованием уникальных номеров идентификаторов. Он всегда возвращает undefined. Когда я удаляю '' x '' из id = "aaa1" + x + '", я могу получить значение, но когда я добавляю x (используется для применения уникального id), он всегда возвращает undefined. Ваша помощь приветствуется.

 
    // alert($('#a').val()); 
 
    // alert($('#b').val()); 
 
    // alert($('#c').val()); 
 
    // alert($('#d').val()); 
 

 
var x=0; 
 
$('#a1').click(function(){ 
 
\t $('#myTable1').append(
 
\t \t \t '<tr><td><input class="form-control input-sm w3-input" id="aaa'+x+'" type="text"></td><td><input class="form-control input-sm w3-input" type="text" id="bbb'+x+'"></td><td><input class="form-control input-sm w3-input" id="ccc" type="text"></td><td><input class="form-control input-sm w3-input" id="ddd" type="text"></td></tr>' 
 
\t \t \t); 
 
\t \t \t x=x+1; 
 
    
 
\t \t \t alert($('#aaa'+x).val()); 
 
\t \t \t alert($('#bbb'+x).val()); 
 
\t \t \t alert($('#ccc'+x).val()); 
 
\t \t \t alert($('#ddd'+x).val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<table class="table table-bordered customFields2" id="myTable1"> 
 
    <tr> 
 
    <td><label class="w3-validate">Components Required</label></td> 
 
    <td><label class="w3-validate">Description</label></td> 
 
    <td><label class="w3-validate">Qty Per</label></td> 
 
    <td><label class="w3-validate">Total Qty</label></td> 
 
    </tr> 
 
    <tr>  
 
    <td><input class="form-control input-sm w3-input" id="a" type="text" required></td> 
 
    <td><input class="form-control input-sm w3-input" id="b" type="text" required></td> 
 
    <td><input class="form-control input-sm w3-input" id="c" type="text" required></td> 
 
    <td><input class="form-control input-sm w3-input" id="d" type="text" required></td> 
 
    </tr> 
 
</table> 
 
<button id="a1" class="w3-btn w3-hover-cyan"><i class="fa fa-plus-circle"></i> Add Row</button><hr>

Answer 1

// alert($('#a').val()); 
 
// alert($('#b').val()); 
 
// alert($('#c').val()); 
 
// alert($('#d').val()); 
 

 
var x = 0; 
 
$('#a1').click(function() { 
 
    $('#myTable1').append(
 
    '<tr><td><input class="form-control input-sm w3-input" id="aaa1' + x + '" type="text" value="123"></td><td><input class="form-control input-sm w3-input" type="text" id="bbb' + x + '"></td><td><input class="form-control input-sm w3-input" id="ccc" type="text"></td><td><input class="form-control input-sm w3-input" id="ddd" type="text"></td></tr>' 
 
); 
 
    x = x + 1; 
 

 
    alert($('#aaa' + x).length); 
 
    alert($('#bbb' + x).length); 
 
    alert($('#ccc' + x).length); 
 
    alert($('#ddd' + x).length); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<table class="table table-bordered customFields2" id="myTable1"> 
 
    <tr> 
 
    <td> 
 
     <label class="w3-validate">Components Required</label> 
 
    </td> 
 
    <td> 
 
     <label class="w3-validate">Description</label> 
 
    </td> 
 
    <td> 
 
     <label class="w3-validate">Qty Per</label> 
 
    </td> 
 
    <td> 
 
     <label class="w3-validate">Total Qty</label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input class="form-control input-sm w3-input" id="a" type="text" required> 
 
    </td> 
 
    <td> 
 
     <input class="form-control input-sm w3-input" id="b" type="text" required> 
 
    </td> 
 
    <td> 
 
     <input class="form-control input-sm w3-input" id="c" type="text" required> 
 
    </td> 
 
    <td> 
 
     <input class="form-control input-sm w3-input" id="d" type="text" required> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<button id="a1" class="w3-btn w3-hover-cyan"><i class="fa fa-plus-circle"></i> Add Row</button> 
 
<hr>

1. Поскольку вход не существует в течение этого времени, если вы проверить длину она равна нулю
2. Кроме того, ваш идентификатор неправильно в append это aaa1 в оповещении у вас есть только aaa

Answer 2

Я нашел решение для вас.

Пожалуйста, проверьте ниже. https://jsfiddle.net/0htvshzk/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
<table class="table table-bordered customFields2" id="myTable1"> 
    <tr> 
    <td> 
     <label class="w3-validate">Components Required</label> 
    </td> 
    <td> 
     <label class="w3-validate">Description</label> 
    </td> 
    <td> 
     <label class="w3-validate">Qty Per</label> 
    </td> 
    <td> 
     <label class="w3-validate">Total Qty</label> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <input class="form-control input-sm w3-input" id="a" type="text" required> 
    </td> 
    <td> 
    <input class="form-control input-sm w3-input" id="b" type="text" required> 
    </td> 
    <td> 
    <input class="form-control input-sm w3-input" id="c" type="text" required> 
    </td> 
<td> 
    <input class="form-control input-sm w3-input" id="d" type="text" required> 
</td> 
</tr> 
</table> 
<button id="a-0" class="w3-btn w3-hover-cyan"><i class="fa fa-plus-circle"></i> Add Row</button> 
<hr> 

---

$('#a-0').click(function() { 
var id = $(this).attr("id"); 
var x = id.split("-").pop(); 
$('#myTable1').append(
'<tr><td><input class="form-control input-sm w3-input" id="aaa' + x + '" type="text" value="123"></td><td><input class="form-control input-sm w3-input" type="text" id="bbb' + x + '"></td><td><input class="form-control input-sm w3-input" id="ccc" type="text"></td><td><input class="form-control input-sm w3-input" id="ddd" type="text"></td></tr>' 
); 
    x = parseInt(x)+1; 
    var aid ='#aaa'+ x; 
    var bid ='#bbb'+ x; 
    var cid ='#ccc'+ x; 
    var did ='#ddd'+ x; 
    alert(aid); 
    alert(bid); 
    alert(cid); 
    alert(did); 
    $(this).attr("id",'a-'+x); 
});