怎么实现js实现复选框动态生成行？？
主要是实现这样一个效果选中哪个复选框点击提交以后就增加行比如说选中了张三那么就动态在线面生成一个复选框张三点击几个复选框生成几行...
主要是实现这样一个效果
选中哪个复选框 点击提交以后 就增加行 比如说选中了张三 那么就动态在线面生成一个 复选框 张三 点击几个复选框生成几行 展开
选中哪个复选框 点击提交以后 就增加行 比如说选中了张三 那么就动态在线面生成一个 复选框 张三 点击几个复选框生成几行 展开
3个回答
展开全部
<body>
<input type=checkbox name=chk value="张三">张三<br>
<input type=checkbox name=chk value="李四">李四<br>
<input type=checkbox name=chk value="王五">王五<br>
<input type=checkbox name=chk value="赵六">赵六<br>
<input type=button value="提交" onClick="check()">
<input type=reset value="重置"><br>
<hr>
<div id="content"></div>
<script>
function check(){
var content = document.getElementById("content");
content.innerHTML = "";
var chk = document.getElementsByName("chk");
for(var i =0;i<chk.length;i++){
if(chk[i].checked){
var td = document.createElement("td");
td.innerHTML = "<input type=checkbox name=chk value="+chk[i].value+">"+chk[i].value+"";
var tr = document.createElement("tr");
var tbody = document.createElement("tbody");
var table = document.createElement("table");
table.style.border = "1px solid #CCCCCC";
table.width = "75%";
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
content.appendChild(table);
}
}
}
</script>
</body>
<input type=checkbox name=chk value="张三">张三<br>
<input type=checkbox name=chk value="李四">李四<br>
<input type=checkbox name=chk value="王五">王五<br>
<input type=checkbox name=chk value="赵六">赵六<br>
<input type=button value="提交" onClick="check()">
<input type=reset value="重置"><br>
<hr>
<div id="content"></div>
<script>
function check(){
var content = document.getElementById("content");
content.innerHTML = "";
var chk = document.getElementsByName("chk");
for(var i =0;i<chk.length;i++){
if(chk[i].checked){
var td = document.createElement("td");
td.innerHTML = "<input type=checkbox name=chk value="+chk[i].value+">"+chk[i].value+"";
var tr = document.createElement("tr");
var tbody = document.createElement("tbody");
var table = document.createElement("table");
table.style.border = "1px solid #CCCCCC";
table.width = "75%";
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
content.appendChild(table);
}
}
}
</script>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果用jquery的话 简单几行代码就够了
这个是用纯js写得
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "\-");
var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
window.onload = function(){
document.getElementById('submit').onclick=function(){
var cbs = getElementsByClassName(document, "input", 'cb');
var trs = "";
for(var i=0;i<cbs.length;i++){
if(cbs[i].checked){
trs += "<TR>"+cbs[i].parentElement.parentElement.innerHTML+"</TR>";
}
}
document.getElementById("addTable").innerHTML="<table>"+trs+"</table>";
};
}
</script>
</head>
<body>
<div id="addTable">
</div>
<table>
<tr>
<td><input class="cb" type="checkbox"/></td><td>张三</td>
</tr>
<tr>
<td><input class="cb" type="checkbox"/></td><td>张4</td>
</tr>
<tr>
<td><input class="cb" type="checkbox"/></td><td>张5</td>
</tr>
</table>
<input id="submit" type="button" value="提交"/>
</body>
</html>
这个是用纯js写得
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "\-");
var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
window.onload = function(){
document.getElementById('submit').onclick=function(){
var cbs = getElementsByClassName(document, "input", 'cb');
var trs = "";
for(var i=0;i<cbs.length;i++){
if(cbs[i].checked){
trs += "<TR>"+cbs[i].parentElement.parentElement.innerHTML+"</TR>";
}
}
document.getElementById("addTable").innerHTML="<table>"+trs+"</table>";
};
}
</script>
</head>
<body>
<div id="addTable">
</div>
<table>
<tr>
<td><input class="cb" type="checkbox"/></td><td>张三</td>
</tr>
<tr>
<td><input class="cb" type="checkbox"/></td><td>张4</td>
</tr>
<tr>
<td><input class="cb" type="checkbox"/></td><td>张5</td>
</tr>
</table>
<input id="submit" type="button" value="提交"/>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
--------------------------------------------------------------------
安全防线 有WEB方面的老师 你可以去咨询下，百度 安全防线 第一位就是了
如果能帮助到你，请给分 谢谢。
安全防线 有WEB方面的老师 你可以去咨询下，百度 安全防线 第一位就是了
如果能帮助到你，请给分 谢谢。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
