Question

我希望当我点击+添加更多按钮时，它应该添加与第1行相同的元素，同样S.No应该递增...并且每行都有删除选项。

<a href="" id="c" class="text-right">+add more</a>

<table class="table">
    <thead>
        <tr>
            <th>S.No.</th>
            <th>Name</th>
            <th>Dose</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td style="width:80%">
                <input id="1a" type="text" class="form-control">
            </td>
            <td style="width:80%">
                <input type="number" class="form-control">
            </td>
        <tr>
    </tbody>
</table>

Answer 1

您可以使用.clone()复制您的第一个tr：

$(".text-right").on("click", function() {
  var tr = $("table tr:eq(1)").clone(true);
  $(tr).find("td:first").text($("table tr").length - 1);
  $("table").append(tr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="c" class="text-right">+add more</a>
<table class="table">
  <thead>
    <tr>
      <th>S.No.</th>
      <th>Name</th>
      <th>Dose</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td style="width:80%">
        <input type="text" class="form-control">
      </td>
      <td style="width:80%">
        <input type="number" class="form-control">
      </td>
      <tr>
  </tbody>

</table>

我从输入中删除id因为id必须是唯一的。同时修改代码以增加td正确的数值。

Answer 2

Jquery clone()用于克隆DOM元素，然后您可以追加它。考虑这样的代码：

$(function(){
    $("#c").click(function(e){
        e.preventDefault();
        $("table.table tbody tr:first").clone().appendTo("table.table tbody");
    });
})

DEMO

增加序列号：

$(function(){
    var counter = 1;
    $("#c").click(function(e){
        e.preventDefault();
        var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
        tr.find("td:eq(0)").text(++counter);
    });
})

See it in action

Answer 3

尝试： HTML：

select trunc(systimestamp - interval '30' minute, 'hh') + interval '30' minute

JS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a href="#" id="c" class="text-right">+add more</a>
    <table class="table">
      <thead>
        <tr>
          <th>S.No.</th>
          <th>Name</th>
          <th>Dose</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td style="width:80%">
            <input type="text" class="form-control">
          </td>
          <td style="width:80%">
            <input type="number" class="form-control"/></br><a class="rm" href="#">remove</a>
          </td>
          </tr>
      </tbody>

    </table>

的jsfiddle：https://jsfiddle.net/pjeruccb/3/

Answer 4

看看这个：

$(".text-right").on("click", function() {
  var prevNo = parseInt($(".table tr:last td:first-child").text());
  var tr = $("table tr:eq(1)").clone(true);
  $("table").append(tr);
  $('.table tr:last-child td:first-child').html(prevNo + 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="c" class="text-right">+add more</a>
<table class="table">
  <thead>
    <tr>
      <th>S.No.</th>
      <th>Name</th>
      <th>Dose</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td style="width:80%">
        <input type="text" class="form-control">
      </td>
      <td style="width:80%">
        <input type="number" class="form-control">
      </td>
    </tr>
  </tbody>

</table>

在表格中添加元素

4 个答案: