博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
select 标签级联 和 html增加/删除行
阅读量:6908 次
发布时间:2019-06-27

本文共 2551 字,大约阅读时间需要 8 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>
联动和增加行
</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
function jl1(value){
document.getElementById("ml2").options.length = 0;
var selectObj = document.getElementById("ml2");
selectObj.options[selectObj.length] = new Option("全部","");

if(value=='1'){

selectObj.options[selectObj.length] = new Option('v1','v1');
selectObj.options[selectObj.length] = new Option('v2','v2');
}
if(value=='2'){
selectObj.options[selectObj.length] = new Option('vv1','vv1');
selectObj.options[selectObj.length] = new Option('vv2','vv2');
}
fz();
}
function fz(){
var ml1 = $("#ml1").val();
var ml2 = $("#ml2").val();
var ml = (ml2==''||ml2==null)?ml=ml1:ml=ml2;
$("#ml").val(ml);
//alert($("#ml").val());
}
/**
success:function(res){
var result = res.split(";");
var tep;
document.getElementById("ml2").options.length = 0;
var selectObj = document.getElementById("ml2");
selectObj.options[selectObj.length] = new Option("全部","");

if(result!=""&&result!=null){

for (i = 0; i < result.length; i++) {
tep = result[i]
var tmparr = tep.split(",");
selectObj.options[selectObj.length] = new Option(tmparr[1],tmparr[0]);
}
}
changeValue();
}
*/

 

function addTr(){

$("#tbody").append(createNewRow());
sortNumber();
}

function createNewRow(){

var index = $(".tr");
var td = $("#tr1").html();
var tr = "<tr id='tr"+index.length+"' class='tr'>"+td+"</tr>";
return tr;
}
function sortNumber(){
$(".xh").each(function(index,obj){
$(obj).html(index+1);
$(obj).parents('tr').attr("id","tr"+(index+1));
});
}
function delTr(obj){
var tr = $(".tr").length;
if(tr==1){
alert("必须保留一行");
return;
}
$(obj).parents('tr').remove();
sortNumber();
}
</script>
</head>
<body>
<input id='ml' name='ml' type='hidden'/>
<select οnchange="jl1(this.value)" id='ml1'>
<option value ="">全部</option>
<option value ="1">1</option>
<option value ="2">2</option>
<option value ="3">3</option>
</select>
<select id='ml2' οnchange='fz()'>
<option value ="">全部</option>
</select>
<br><br>
<br><br>
<br><br>
<input type='button' value='增加行' οnclick='addTr()'>
<table >
<tbody id='tbody'>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr id='tr1' name='tr' class='tr'>
<td class='xh'>1</td>
<td>
<input name='name'></input>
</td>
<td>
<input name='age'></input>
</td>
<td>
<input type='button' value='删除' οnclick="delTr(this)"></input>
</td>
</tr>
</tbody>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/BigWrite/p/9166346.html

你可能感兴趣的文章
iOS App 的逆向
查看>>
Spring如何扫描class和配置文件
查看>>
Java压缩技术(一) ZLib
查看>>
【VMware虚拟化解决方案】VMware Horizon View Client 各平台配置文档
查看>>
java线程池
查看>>
Linux内核线程
查看>>
Linux cp时总询问是否覆盖,怎样让它不询问直接覆盖
查看>>
笨方法学python Lesson 45
查看>>
Java HashMap的实现原理
查看>>
服务器的发送数据
查看>>
kvm install 报错could not open disk imageXXX: Permission denied
查看>>
lduan office 365 自定义域的添加和配置二
查看>>
在Wordpress侧栏中使用下拉菜单显示分类
查看>>
基础排序算法 – 选择排序Selection sort
查看>>
Appium移动自动化测试环境部署
查看>>
corosync+pacemaker+crm实现drbd高可用
查看>>
Git Fork和PullRequest
查看>>
springBoot2.x设置quartz的overwriteExistingJobs参数
查看>>
VMware中通过克隆的Centos7,网卡突然没了
查看>>
学习笔记 DNS 子域授权 view
查看>>