动态表格示例
作产品页时有需要动态表格支持，故作一个示例先进行测试表格的使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/include/taglib.jsp"%>
<html>
<head>
<title>动态表格操作</title>
<SCRIPT type=text/javascript>
//上移
function moveUp(obj) {
var rowCount = $("#oTable tr").size();
var curRow = $(obj).parent().parent().prevAll().length + 1;
//获取当前行是第几行
if (curRow == 1){
alert("第一行不可以上移");
} else {
var curTr = $(obj).parent().parent();
var preTr = curTr.prev();
var curValue = curTr.children("td").html();
var preValue = preTr.children("td").html();
// alert("cur = " + curValue + " ,next = " + nextValue);
curTr.children("td").eq(0).html(preValue);
preTr.children("td").eq(0).html(curValue);
//获取当前行的上一行
var preTrClone = preTr.clone(true);
curTr.after(preTrClone);
//在curTr后插入一行
preTr.remove();
}
}
//下移
function moveDown(obj) {
var rowCount = $("#oTable tr").size();
var curRow = $(obj).parent().parent().prevAll().length + 1;
var count = rowCount - curRow;
if (count == 0) {
alert("当前行不可以下移");
} else {
var curTr = $(obj).parent().parent();
var nextTr = curTr.next();
var curValue = curTr.children("td").html();
var nextValue = nextTr.children("td").html();
curTr.children("td").eq(0).html(nextValue);
nextTr.children("td").eq(0).html(curValue);
//获取当前行的下一行
var curTrClone = curTr.clone(true);
nextTr.after(curTrClone);
curTr.remove();
}
}
function del(e) {
alert($(e).parent().html());
var cur = $(e).parent().html();
$("#oTable tr td li").each(
function(){
alert($(this).html());
var val = $(this).html();
if(cur == val) {
$(e).parent().remove();
}
});
}
<!-- jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数对其进行排序后再次输出。 -->
function create() {
var isOk = false;
var text = " <INPUT onclick='del(this)' type='button' value='delete'><br/>";
var sli = "<li style='list-style-type:none'>";
var sli1 = "</li>";
$("#oTable tr").each(
function() {
alert($(this).children("td").eq(1).html());
if($("#name").val() == $(this).children("td").eq(1).html()) {
var value = $(this).children("td").eq(3).html();
// alert(curTr.children("td").eq(3).html()); //取得无序表值...
var val = $("#value").val();
value = value + sli + val + text + sli1;
$(this).children("td").eq(3).html(value);
isOk = true;
$("#oTable tr td li").each(
function(){
alert($(this).html());
}
);
}
});
if(!isOk) {
var table = $("#oTable");
var rowCount = $("#oTable tr").size();
var tr = $("#oTable tr").eq(0).clone(true);
tr.children("td").eq(0).html(rowCount + 1);
tr.children("td").eq(1).html("颜色5");
tr.children("td").eq(2).html("单选属性");
tr.children("td").eq(3).html("test5.. : 黑色5");
tr.appendTo(table);
}
}
function save() {
var rowCount = $("#oTable tr").size();
var data = new Array();
var index = 0;
$("#oTable tr").each(
function() {
alert($(this).children("td").eq(0).html());
alert($(this).children("td").eq(1).html());
alert($(this).children("td").eq(2).html());
alert($(this).children("td").eq(3).html());
data[index]=new Array();
data[index][0] = $(this).children("td").eq(0).html();
data[index][1] = $(this).children("td").eq(1).html();
data[index][2] = $(this).children("td").eq(2).html();
data[index][3] = $(this).children("td").eq(3).html();
index = index + 1;
});
alert(data);
}
function onselect() { //按下鼠标右键选中表格中的某行。
var oObj = event.srcElement;
alert("test select. "+ oObj.tagName);
alert("test select. "+ oObj.parentNode.id);
var line = oObj.parentNode;
alert("l1 = " + $(line).children("td").eq(0).html());
alert("l1 = " + $(line).children("td").eq(1).html());
alert("l1 = " + $(line).children("td").eq(2).html());
alert("l1 = " + $(line).children("td").eq(3).html());
}
</SCRIPT>
</head>
<body>
<P align=center><INPUT onclick=save() type=button value=保存>
<input id="name" type="text" value=""/><input id="value" type="text" value=""/>
<INPUT onclick=create() type=button value=新建></P>
<TABLE id='oTable' align='center' border='1' onmousedown="onselect()">
<TBODY>
<TR id=tr1>
<%--<TD style="display:none;">1</TD>--%>
<TD>1</TD>
<TD>颜色1</TD>
<TD>单选属性</TD>
<td>test1.. : 黑色1 <INPUT onclick='del()' type='button' value='delete'><br/>
test2.. : 黑色2 <INPUT onclick='del()' type='button' value='delete'><br/>
test3.. : 黑色3 <INPUT onclick='del()' type='button' value='delete'><br/>
</td>
<TD><INPUT onclick='moveUp(this)' type='button' value='up'></TD>
<TD><INPUT onclick='moveDown(this)' type='button' value='down'></TD>
</TR>
<TR id=tr2>
<%--<TD style="display:none;">2</TD>--%>
<TD>2</TD>
<TD>颜色2</TD>
<TD>单选属性2</TD>
<td>test..2 : 黑色2<INPUT onclick='del()' type='button' value='delete'><br/></td>
<TD><INPUT onclick='moveUp(this)' type='button' value='up'></TD>
<TD><INPUT onclick='moveDown(this)' type='button' value='down'></TD>
</TR>
<TR id=tr3>
<%--<TD style="display:none;">3</TD>--%>
<TD>3</TD>
<TD>颜色3</TD>
<TD>单选属性3</TD>
<td>test..3 : 黑色3<INPUT onclick='del()' type='button' value='delete'><br/></td>
<TD><INPUT onclick='moveUp(this)' type='button' value='up'></TD>
<TD><INPUT onclick='moveDown(this)' type='button' value='down'></TD>
</TR>
<TR id=tr4>
<%--<TD style="display:none;">4</TD>--%>
<TD>4</TD>
<TD>颜色4</TD>
<TD>单选属性4</TD>
<td>
<%--<ul style="list-style-type:none">--%>
<li style="list-style-type:none">苹果<INPUT onclick='del(this)' type='button' value='delete'></li>
<li style="list-style-type:none">香蕉<INPUT onclick='del(this)' type='button' value='delete'></li>
<!--</ul>-->
</td>
<TD><INPUT onclick='moveUp(this)' type='button' value='up'></TD>
<TD><INPUT onclick='moveDown(this)' type='button' value='down'></TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
