js已动态添加的行当外部选项改变再添加新行或删除
当点击添加按钮时每次添加多行多列，现在要添加个功能，页面中有个单选a,b,c项，当选择b时再已添加的行上再添加一行(如果原来添加了N次，就要在对应的行前面添加一行，共N行...
当点击添加按钮时每次添加多行多列，现在要添加个功能，页面中有个单选a,b,c项，当选择b时再已添加的行上再添加 一行(如果原来添加了N次，就要在对应的行前面添加一行，共N行)，如果单选选择a/c时，要把添加的对应那行都去掉。求助各位大侠们，多谢！没分了，只能给这么点了。。
展开
展开全部
上代码
新鲜出炉
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script class="jquery library" src="http://runjs.cn/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function add()
{
var addMode = $("input[name='mode']:checked").val();
if(!addMode){
return false;
}
var rows = $("#muliteRow tr[class!='newRow']");
if(addMode === "b"){
rows.before("<tr class='newRow'><td>新行</td></tr>");
}else if(addMode === "a" || addMode === "c"){
rows.each(function(){
$(this).prev(".newRow").remove();
});
}
}
</script>
</head>
<body>
<h1>New Web Project Page</h1>
<table id="muliteRow">
<tr><td>行一</td></tr>
<tr><td>行二</td></tr>
<tr><td>行三</td></tr>
<tr><td>行四</td></tr>
</table>
<td>
<input type="radio" name="mode" value="a"/>a
<input type="radio" name="mode" value="b"/>b
<input type="radio" name="mode" value="c"/>c
</td>
<input type="button" value="添加" onclick="add()"/>
</body>
</html>
更多追问追答
追问
多谢，可以了。。如果改为Js不用jquery的怎么改写哈。。菜鸟飞过。。。
追答
可累死我了 转源生要吐血了啊
function add()
{
var addMode = "";
var modes = document.getElementsByName("mode");
for(var i in modes ){
if(modes[i].checked){
addMode = modes[i].value;
}
}
if(!addMode){
return false;
}
var trs = [].slice.apply(document.getElementById("muliteRow").getElementsByTagName("tr"));
for(var i in trs ){
if(trs[i].className=="newRow"){
trs.splice(i,1);
}
}
if(addMode === "b"){
for(var i in trs ){
trs[i].insertAdjacentHTML("beforeBegin","<tr class='newRow'><td>新行</td></tr>");
}
}else if(addMode === "a" || addMode === "c"){
for(var i in trs ){
if(trs[i].previousSibling.className="newRow"){
trs[i].previousSibling.parentNode.removeChild(trs[i].previousSibling);}
}
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<title></title>
<script>
$(document).ready(function(){
//<tr/>居中
$("#tab tr").attr("align","center");
//增加<tr/>
$("#but").click(function(){
var _len = $("#tab tr").length;
$("#tab").append("<tr id="+_len+" align='center'>"
+"<td>"+_len+"</td>"
+"<td>Dynamic TR"+_len+"</td>"
+"<td><input type='text' name='desc"+_len+"' id='desc"+_len+"' /></td>"
+"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>删除</a></td>"
+"</tr>");
})
})
//删除<tr/>
var deltr =function(index)
{
var _len = $("#tab tr").length;
$("tr[id='"+index+"']").remove();//删除当前行
for(var i=index+1,j=_len;i<j;i++)
{
var nextTxtVal = $("#desc"+i).val();
$("tr[id=\'"+i+"\']")
.replaceWith("<tr id="+(i-1)+" align='center'>"
+"<td>"+(i-1)+"</td>"
+"<td>Dynamic TR"+(i-1)+"</td>"
+"<td><input type='text' name='desc"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>"
+"<td><a href=\'#\' onclick=\'deltr("+(i-1)+")\'>删除</a></td>"
+"</tr>");
}
}
</script>
</head>
<body>
<table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
<tr>
<td width="20%">序号</td>
<td>标题</td>
<td>描述</td>
<td>操作</td>
</tr>
</table>
<div style="border:2px;
border-color:#00CC00;
margin-left:20%;
margin-top:20px">
<input type="button" id="but" value="增加"/>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<title></title>
<script>
$(document).ready(function(){
//<tr/>居中
$("#tab tr").attr("align","center");
//增加<tr/>
$("#but").click(function(){
var _len = $("#tab tr").length;
$("#tab").append("<tr id="+_len+" align='center'>"
+"<td>"+_len+"</td>"
+"<td>Dynamic TR"+_len+"</td>"
+"<td><input type='text' name='desc"+_len+"' id='desc"+_len+"' /></td>"
+"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>删除</a></td>"
+"</tr>");
})
})
//删除<tr/>
var deltr =function(index)
{
var _len = $("#tab tr").length;
$("tr[id='"+index+"']").remove();//删除当前行
for(var i=index+1,j=_len;i<j;i++)
{
var nextTxtVal = $("#desc"+i).val();
$("tr[id=\'"+i+"\']")
.replaceWith("<tr id="+(i-1)+" align='center'>"
+"<td>"+(i-1)+"</td>"
+"<td>Dynamic TR"+(i-1)+"</td>"
+"<td><input type='text' name='desc"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>"
+"<td><a href=\'#\' onclick=\'deltr("+(i-1)+")\'>删除</a></td>"
+"</tr>");
}
}
</script>
</head>
<body>
<table id="tab" border="1" width="60%" align="center" style="margin-top:20px">
<tr>
<td width="20%">序号</td>
<td>标题</td>
<td>描述</td>
<td>操作</td>
</tr>
</table>
<div style="border:2px;
border-color:#00CC00;
margin-left:20%;
margin-top:20px">
<input type="button" id="but" value="增加"/>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
