然后新增的行 最后是减号 点击减号可以删除掉当前行
<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);
以
为例,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>