bootstrap table 画页面如何实现点击增加按钮 可以增加一行与当前一样的

点击加号加一行与当前行一样的

然后新增的行 最后是减号 点击减号可以删除掉当前行

<tr class="active">
              <td style="width: 18%">还款日期</td>
              <td style="width: 32%"><input type="text"  class="time-input" id="repaymentDate" placeholder="年/月/日" name="params[startTime]" style="width: 65%"/>
               <td style="">还款金额</td>
               <td style=""><input type="text" style="text-align: right;" name="repaymentMoney"   required/>
                <label>元</label>
               <button class="glyphicon glyphicon-minus" ></button>
 </td>
</tr>

代码大概是这样的
我想知道 jq 怎么给他增加一行一样的 点这个加号可以一直加
然后新增的行末尾是减号,点减号可以减掉当前行,
这样怎么给新增的行 初始化 id 和name
还有怎么提交到后台

首先,定义好要增加的元素的样式,然后,用append方法进行追加,类似

$('div的class').append(html);

为例,
$("p").append("这里输入你想要添加的文字");

append 是在结尾处添加内容,prepend是在开头处添加内容

希望可以解决您的问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="jquery-1.11.0.js" ></script>
    <body>
        <tr>
            <td>
                <div id="td">
                    <div>
                        <input id="input0" name="name0" class="inputclass" type="text"/>元<button id="button0" onclick="addrow()">+</button>
                    </div>
                </div>
            </td>
        </tr>
    </body>
    <script>
        function addrow(){
            var inputList=document.getElementsByClassName("inputclass");
            console.log(inputList[0]);
            console.log(inputList);
            var inputx='<div><input class="inputclass" type="text"/>元<button  onclick="remove(this)">-</button><div>';
            $("#td").append(inputx);
            var i=0;
            for(i;i<inputList.length;i++){
                var id="input"+i;
                var name="name"+i;
                var divid="div"+i;
                var buttonid="button"+i;
                var buttonvalue=i;
                inputList[i].setAttribute("id",id);
                inputList[i].setAttribute("name",name);
                inputList[i].parentNode.setAttribute("id",divid);
                inputList[i].nextElementSibling.setAttribute("id",buttonid);
                inputList[i].nextElementSibling.setAttribute("value",buttonvalue);
            }

        }

        function remove(element){
            console.log(element.value);
            var a=element.value;
            $("#div"+a).remove();
        }
    </script>
</html>

id,name都是唯一的,有一个序列,需要你自己把控了

var _tab=$("#tableid");
var vTr=<tr><td>aa</td> <tr>
_tab.append(vTr);

这样可以直接拼

20190723修改为在下一行tr中加id 新加的都拼到他的前面 这样位置才会不是在表格底部

var a = 1;var c= 1;
//选择否的增加方法
function addRown() {

    var id = 'index' + (a++);
    var repayid='repaymentMoneyn'+(c++);
    var vTr = "<tr class=\"active\" id='" + id + "'>\n" +
        " <td style=\"text-align: right\"><span style=\"color: red;\">*</span>还款日期:</td>\n" +
        "<td ><div class=\"col-sm-8\"><input type=\"text\"  class=\"time-input form-control\"  placeholder=\"年/月/日\" name=\"repaymentDate\" /></div>\n" +
        "  <td style=\"text-align: right\"><span style=\"color: red;\">*</span>还款金额:</td>\n" +
        " <td class=\"col-sm-4\"> <div class=\"col-sm-8\"><input type=\"text\" id='"+repayid+"'  name=\"repaymentMoneyn\"  class=\"form-control\" onkeyup=\"this.value=this.value.replace(/[^\\d.]/g,'') \" onafterpaste=\"this.value=this.value.replace(/[^\\d.]/g,'') \" required/></div>\n" +
        " <label>元</label>\n" +
        "  <label type=\"button\" name=\"delBtn\" class=\"glyphicon glyphicon-minus\" onClick=\"delRown(" + id + ");\"/>\n" +
        "   </td>\n" +
        " </tr>"
    $('#test').before(vTr);    这里的test是下一行tr的id

}

拼接后需要给一些控件重新初始化

表格追加一行
script 追加 拼接的html
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
前两个用table id 后两个用tr的 id 可能

var _tab = $("#tablea tr:eq(4)"); 这种追加不懂 是在表格右侧追加了好像
下面追加我不清楚怎么写

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>使用bootstrap的表格实例</title> 
    <meta name="description" content="Creating a table with Bootstrap. Learn how to use Bootstrap toolkit to create Tables with examples.">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
    <tr class="active">
        <td>还款日期</td>
      <td><input type="text"  class="time-input" id="repaymentDate" placeholder="年/月/日" name="params[startTime]"/>
      <td>还款金额</td>
      <td><input type="text" style="text-align: right;" name="repaymentMoney"   required/>
             <label>元</label>
            <button class="glyphicon glyphicon-minus" ></button>
          </td>
    </tr>
</table>

<script>
$(function(){
    $(".active .glyphicon").click(function(){
            var inputx='<tr><td>1</td><td>2</td><td>3</td></tr>';//内容
            alert("aa");
      $(".active").after(inputx);//追加
    });
});
</script>
</body>
</html>