javascript - 获取表中特定 td 的最近 td

Question

我正在寻找动态添加表行，这样行的每个元素的 id 应该比前一行的 tds 的 id 多一个。例如，如果前一行的 tds 具有 ids a7、b7、c7 下一行将有 tds与 a8、b8、c8 等

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>

标签： javascriptjquery

Answer 1

我在一行中修改了你的代码以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>