我正在寻找动态添加表行的方法，以使该行的每个元素的ID都要比上一行的tds的ID多一个。就像上一行的tds的ID为a7，b7，c7一样，下一行将带有a8，b8，c8等的tds，
var rowCount=0;
function createit(){
rowCount++;
var tds=$("#addrowtd").closest('tr').children().each((a)=>{
//how to get the ids of tds here
console.log(a);
});// this outputs addrowtd ,how to get a2 ,b2 and c2 of this row
//console.log(tds)
var newRow = $("<tr>");
var cols = "";
//I want to increment the each id and then add to the respective field like below
cols += '<td id="a3"><input type="text" class="form-control" name="name' + rowCount + '"/></td>';
cols += '<td id="b3"><input type="text" class="form-control" name="mail' + rowCount + '"/></td>';
cols += '<td id="c3"><input type="text" class="form-control" name="phone' + rowCount + '"/></td>';
cols += '<td id="addrowtd" colspan="5" style="text-align: left;"><button type="button" class="btn btn-lg btn-block " onclick="createit()" id="addrow" >Add Row</button></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#addrowtd").remove();//removig the previous one
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="a2">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4" id="b2">
<input type="mail" name="mail" class="form-control"/>
</td>
<td class="col-sm-3" id="c2">
<input type="text" name="phone" class="form-control"/>
</td>
<td id="addrowtd" colspan="5" style="text-align: left;">
<button type="button" onclick="createit()" class="btn btn-lg btn-block" >Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分：0)
我在一行中修改了您的代码，以从表中获取最后一个tr并获取其id，然后对其进行递增。
var tds = $('#myTable').children()[1].lastElementChild.firstElementChild.getAttribute('id');这就是我所做的。可能会有所帮助。请看一下摘要。要查看id的更改，请使用开发者工具。
var rowCount = 0;
function createit() {
rowCount++;
var tds = $('#myTable').children()[1].lastElementChild.firstElementChild.getAttribute('id');
//debugger;
tds = +tds.match(/\d/g).join('')+1;
console.log(`new id number ${tds}`)
var newRow = $("<tr>");
var cols = "";
//I want to increment the each id and then add to the respective field like below
cols += '<td id="a'+tds+'"><input type="text" class="form-control" name="name' + rowCount + '"/></td>';
cols += '<td id="b'+tds+'"><input type="text" class="form-control" name="mail' + rowCount + '"/></td>';
cols += '<td id="c'+tds+'"><input type="text" class="form-control" name="phone' + rowCount + '"/></td>';
cols += '<td id="addrowtd" colspan="5" style="text-align: left;"><button type="button" class="btn btn-lg btn-block " onclick="createit()" id="addrow" >Add Row</button></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#addrowtd").remove(); //removig the previous one
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="a2">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4" id="b2">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3" id="c2">
<input type="text" name="phone" class="form-control" />
</td>
<td id="addrowtd" colspan="5" style="text-align: left;">
<button type="button" onclick="createit()" class="btn btn-lg btn-block">Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>
答案 1 :(得分：-1)
希望这对您有帮助，我已在一行中打印了td的所有ID，除了最后一个ID
var rowCount=0;
function createit(){
rowCount++;
let tdarray=[];
var tds=$("#addrowtd").closest('tr').children().not(':last').each((column, td)=>{
tdarray.push($(td).attr('id'));
//how to get the ids of tds here
console.log($(td).attr('id'));
});// this outputs addrowtd ,how to get a2 ,b2 and c2 of this row
//console.log(tds)
var newRow = $("<tr>");
var cols = "";
//I want to increment the each id and then add to the respective field like below
cols += '<td id="a3"><input type="text" class="form-control" name="name' + rowCount + '"/></td>';
cols += '<td id="b3"><input type="text" class="form-control" name="mail' + rowCount + '"/></td>';
cols += '<td id="c3"><input type="text" class="form-control" name="phone' + rowCount + '"/></td>';
cols += '<td id="addrowtd" colspan="5" style="text-align: left;"><button type="button" class="btn btn-lg btn-block " onclick="createit()" id="addrow" >Add Row</button></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#addrowtd").remove();//removig the previous one
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="a2">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4" id="b2">
<input type="mail" name="mail" class="form-control"/>
</td>
<td class="col-sm-3" id="c2">
<input type="text" name="phone" class="form-control"/>
</td>
<td id="addrowtd" colspan="5" style="text-align: left;">
<button type="button" onclick="createit()" class="btn btn-lg btn-block" >Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>