没啥代码 就是一个跨行的表格实现动态添加行
如下
<html><body>
<table border="1">
<tr>
<td rowspan="2">项目</th>
<td>item1</td>
<td rowspan="2">列表</th>
<td>item2</td>
</tr>
<tr>
<td>list1</td>
<td>list2</td>
</tr>
</table>
<button />添加</button>
<button />删除</button></body>
</html>需要的效果在上面 网上没找到跨行的,我也不太懂,来请教一下
如下
<html><body>
<table border="1">
<tr>
<td rowspan="2">项目</th>
<td>item1</td>
<td rowspan="2">列表</th>
<td>item2</td>
</tr>
<tr>
<td>list1</td>
<td>list2</td>
</tr>
</table>
<button />添加</button>
<button />删除</button></body>
</html>需要的效果在上面 网上没找到跨行的,我也不太懂,来请教一下
解决方案 »
- jsp通过foreach迭代出数据，如何将未选中的所有复选框的值（ID）的，同过表单提交到Servlet
- 关于用jQuery获取指定URL的源代码的问题
- javascript+ajax新手问题,请教各位大大
- 求javascript写的3des加密算法
- 大家看看这个是什么编码方式？怎么解码呢？
- javascript 的runat=server 用起来跟服务器端脚本比如ASP用起来的区别？
- 按按钮后,先访问数据库,判断是否存在这个记录,如果存在则弹出对话框,然后再点击"确认"或者"取消"覆盖原来的记录,问题是:点击取消程序依然继续运行!
- [共同学习]贴段代码，大家来写执行结果，看谁理解更深刻,关于defer,attachEvent,window.onload....
- ==row&cell,急急请教==
- js window.open()
- IE浏览器，each放在getJSON函数外面不执行
- easyui-datagrid 翻页序号累加 求思路
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head><body>
<table border="1" id="table">
<tr>
<td rowspan="2" class="kh">项目</th>
<td>item1</td>
<td rowspan="2" class="kh">列表</th>
<td>item2</td>
</tr>
<tr class="dh">
<td >list1</td>
<td>list2</td>
</tr>
</table>
<button id="add">添加</button>
<button id='remove'>删除</button><script language="JavaScript">
$(document).ready(function() {
var kh = $("#table").find('.kh');//跨列
var dh = $("#table").find('.dh');//多列
var rowspan = $(kh).prop('rowspan');
$("#add").click(function(){
$(kh).prop('rowspan',++rowspan);
$(dh).after('<tr><td>item1</td><td>item1</td></tr>')
})
$("#remove").click(function(){
if(rowspan > 2){
$(kh).prop('rowspan',--rowspan);
$(dh).siblings(':last').remove();
}
})
});
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
table{margin:0;padding:0;border-collapse:collapse;}
td{border:solid 1px #ccc;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
var i=0;
$("#add").click(function(){
$("#list1").append('<tr><td>item'+i+'</td></tr>');
$("#list2").append('<tr><td>列表'+i+'</td></tr>');
i++;
});
$("#del").click(function(){
$("#list1 tr:last").remove();
$("#list2 tr:last").remove();
i++;
});
})
</script></head><body>
<table id="mT">
<tr>
<td>项目</td>
<td>
<table id="list1">
<tr><td>item1</td></tr>
<tr><td>item2</td></tr>
</table>
</td>
<td>列表</td>
<td>
<table id="list2">
<tr><td>item1</td></tr>
<tr><td>item2</td></tr>
</table>
</td>
</tr>
</table>
<input type="button" value="添加" id="add"/>
<input type="button" value="删除" id="del"/>
</body>
</html>
然后我现在遇到二个小问题， 我的这个是一个后面带了五个跨行的，现在添加没问题，可以删除就结果不对
应该是 $(kh).prop('rowspan',--rowspan);
$(dh).siblings(':last').remove(); 这二句要改一下，试了半天没成功
我的表 <html>
<body>
<table border="1">
<tr>
<td rowspan="2">项目</td>
<td>itme1</td>
<td rowspan="2">列表1</td>
<td rowspan="2">列表2</td>
<td rowspan="2">列表3</td>
<td rowspan="2">列表4</td>
<td rowspan="2">列表5</td>
</tr>
<tr>
<td>item2</td>
</tr>
</table>
</body>
</html>
还有一个小问题就是我的这个表里为什么在一个<td></td>里面的不在一行显示
<td colspan="6" >
<label style="width:auto;" >A)</label> <input type="radio" name="decision9" value="No" checked />无
<span class="buttonContent"><button disabled = "true" id="add1" >添加</button></span>
<span class="buttonContent"><button disabled = "true" id='remove1'>删除</span></div>
</td>是我写法有问题还是，二个按钮在第二行
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head><body>
<table border="1" id="table">
<tr>
<td rowspan="2" class="kh">项目</td>
<td>itme1</td>
<td rowspan="2" class="kh">列表1</td>
<td rowspan="2" class="kh">列表2</td>
<td rowspan="2" class="kh">列表3</td>
<td rowspan="2" class="kh">列表4</td>
<td rowspan="2" class="kh">列表5</td>
</tr>
<tr class="dh">
<td>item2</td>
</tr>
<tr class="button">
<td colspan="7" >
<label style="width:auto;" >A)</label> <input type="radio" name="decision9" value="No" checked />无
<span class="buttonContent"><button disabled = "true" id="add1" >添加</button></span>
<span class="buttonContent"><button disabled = "true" id='remove1'>删除</span></div>
</td>
</tr>
</table>
<button id="add">添加</button>
<button id='remove'>删除</button><script language="JavaScript">
$(document).ready(function() {
var kh = $("#table").find('.kh');//跨列
var dh = $("#table").find('.dh');//多列
var rowspan = $(kh).prop('rowspan');
$("#add").click(function(){
$(kh).prop('rowspan',++rowspan);
$(dh).after('<tr><td>item1</td></tr>')
})
$("#remove").click(function(){
if(rowspan > 2){
$(kh).prop('rowspan',--rowspan);
$(dh).siblings(':not(".button"):last').remove();
}
})
});
</script>
</body>
</html>
$(kh).prop('rowspan',--rowspan); $(dh).siblings(':not(".button"):last').remove();
有二处都要进行这种自动添加删除操作
简要的表图如下 有文字处是要自动添加的地方
简要的表图如下 有文字处是要自动添加的地方可以看到图吗
代码<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head><body>
<table width="890" border="1" id="table" >
<tr>
<td colspan="7"><div align="center">测试表格</div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2" class="kh">item</td>
<td>item1
<input type="radio" name="decision9" value="No" checked />无
<span class="buttonContent"><button id="add" >添加</button></span>
<span class="buttonContent"><button id='remove'>删除</button></span>
</td>
<td rowspan="2" class="kh"> </td>
<td rowspan="2" class="kh"> </td>
<td rowspan="2" class="kh"> </td>
<td rowspan="2" class="kh"> </td>
<td rowspan="2" class="kh"> </td>
</tr>
<tr>
<td class="dh">item2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3" class="kh1" >list</td>
<td>list1
<span class="buttonContent"><button id="add1" >添加</button></span>
<span class="buttonContent"><button id='remove1'>删除</button></span>
</td>
<td rowspan="3" class="kh1"> </td>
<td rowspan="3" class="kh1"> </td>
<td rowspan="3" class="kh1"> </td>
<td rowspan="3" class="kh1"> </td>
<td rowspan="3" class="kh1"> </td>
</tr>
<tr>
<td class="dh1">list2</td>
</tr>
<tr>
<td>list3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script language="JavaScript">
$(document).ready(function() {
var kh = $("#table").find('.kh');//跨列
var dh = $("#table").find('.dh');//多列
var rowspan = $(kh).prop('rowspan');
$("#add").click(function(){
$(kh).prop('rowspan',++rowspan);
$(dh).after('<tr><td>item1</td></tr>')
})
$("#remove").click(function(){
if(rowspan > 2){
$(kh).prop('rowspan',--rowspan);
$(dh).siblings(':not(".ah"):last').remove();
}
})
var kh1 = $("#table").find('.kh1');//跨列
var dh1= $("#table").find('.dh1');//多列
var rowspan1 = $(kh1).prop('rowspan');
$("#add1").click(function(){
$(kh1).prop('rowspan',++rowspan1);
$(dh1).after('<tr><td>list1</td></tr>')
})
$("#remove1").click(function(){
if(rowspan1 > 2){
$(kh1).prop('rowspan',--rowspan);
$(dh1).siblings(':not(".ah"):last').remove();
}
})
});
</script>
</body>
</html>
简要的表图如下 有文字处是要自动添加的地方可以看到图吗
代码以下面这个为准
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head><body>
<table width="890" border="1" id="table" >
<tr>
<td colspan="7"><div align="center">测试表格</div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2" class="kh">item</td>
<td>item1
<input type="radio" name="decision9" value="No" checked />无
<span class="buttonContent"><button id="add" >添加</button></span>
<span class="buttonContent"><button id='remove'>删除</button></span>
</td>
<td rowspan="2" class="kh"> </td>
<td rowspan="2" class="kh"> </td>
<td rowspan="2" class="kh"> </td>
<td rowspan="2" class="kh"> </td>
<td rowspan="2" class="kh"> </td>
</tr>
<tr class="dh">
<td >item2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3" class="kh1" >list</td>
<td>list1
<span class="buttonContent"><button id="add1" >添加</button></span>
<span class="buttonContent"><button id='remove1'>删除</button></span>
</td>
<td rowspan="3" class="kh1"> </td>
<td rowspan="3" class="kh1"> </td>
<td rowspan="3" class="kh1"> </td>
<td rowspan="3" class="kh1"> </td>
<td rowspan="3" class="kh1"> </td>
</tr>
<tr class="dh1">
<td >list2</td>
</tr>
<tr>
<td>list3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script language="JavaScript">
$(document).ready(function() {
var kh = $("#table").find('.kh');//跨列
var dh = $("#table").find('.dh');//多列
var rowspan = $(kh).prop('rowspan');
$("#add").click(function(){
$(kh).prop('rowspan',++rowspan);
$(dh).after('<tr><td>item1</td></tr>')
})
$("#remove").click(function(){
if(rowspan > 2){
$(kh).prop('rowspan',--rowspan);
$(dh).siblings(':not(".ah"):last').remove();
}
})
var kh1 = $("#table").find('.kh1');//跨列
var dh1= $("#table").find('.dh1');//多列
var rowspan1 = $(kh1).prop('rowspan');
$("#add1").click(function(){
$(kh1).prop('rowspan',++rowspan1);
$(dh1).after('<tr><td>list1</td></tr>')
})
$("#remove1").click(function(){
if(rowspan1 > 2){
$(kh1).prop('rowspan',--rowspan);
$(dh1).siblings(':not(".ah"):last').remove();
}
})
});
</script>
</body>
</html>
添加没问题,删除就出错了