已经获取到了数据,接下来就是网页端的设计了,因为老师给的样式是知网的,还有动态添加的效果,因此要实现这个就要学习新的内容了。
今天学习实现javascript实现输入框的动态添加和删除,
代码如下:
function add_div() {
var str="<table align='center'> <tr><td><select name='lianjie"+detail_div+"'> <option value='AND'>AND</option> <option value='OR'>OR</option> <option value='NOT'>NOT</option>";
str=str+"</select></td><td><select name='tiaojian"+detail_div+"'><option value='题目'>题目</option><option value='摘要'>摘要</option><option value='关键词'>关键词</option><option value='作者'>作者</option></select></td><td><input type='text' name='input"+detail_div+"'></td><td><select name='jingdu"+detail_div+"'><option value='精准'>精准</option><option value='模糊'>模糊</option><td><input type='button' id='addbtn"+detail_div+"' value='+' onclick='add_div()'></td>";
str=str+"<td><input type='button' id='delebtn"+detail_div+"' value='-' onclick='dele_div(this)'></td></tr></table>";
var div = document.createElement("div");
//div.className = "form-group";
div.id = "lotdiv" + detail_div;
div.innerHTML = str;
document.getElementById("biaodan").appendChild(div);
detail_div++;
realtotal++;
document.getElementById("sum").value=detail_div;
document.getElementById("realsum").value=realtotal;
}
function dele_div(obj){
var id=obj.id;
realtotal--;
id=id.substring(7);
var e = document.getElementById("lotdiv"+id);
document.getElementById("biaodan").removeChild(e);
document.getElementById("sum").value=detail_div;
document.getElementById("realsum").value=realtotal;
}
这两个方法是我根据自己的想法设计的,可能会存在不合适的地方,但也可以实现动态添加和删除输入框。