<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery-1.2.6.js"></script>
<script type="text/javascript">
function add()
{
//获取页面所有的ul
var uls=document.getElementsByTagName("ul");
//获取上一个ul的最后一个li控件
var next;
//每一个ul 有多少个li 手动控制
var collength=3;
//控制假如最后一行刚好是3个 需要新增一个ul 控制
var lastnext;
//循环遍历
for(var i=0;i<uls.length;i++){
var culs=uls[i];
//定义控件数组
var childArray=[];
//alert(culs.innerHTML);
//判断是不是循环到最后一个li 如果li的总数刚好等于列数 就要将最后一行
//的最后一个li设置到lastnext控制上 循环完成之后 div里添加一个ul
if(i==(uls.length-1) && culs.childNodes.length==collength)
lastnext=culs.childNodes[culs.childNodes.length-1];
//如果是第一个ul
if(i==0)
{
//获取第一个ul的最后一个li子元素
next=culs.childNodes[culs.childNodes.length-1];
//如果li的总数刚好等于列数 则需要删除最后一列
if(culs.childNodes.length==collength)
culs.removeChild(next);
//新增一个li 放到数组中 是第一个位置
var newli=document.createElement("li");
//设置li的内部文本时文本框的值
newli.innerHTML=document.getElementById("text").value;
//新增的li放在第一个位置
childArray[childArray.length]=newli;
}else
{
//如果不是第一行 上一行的最后一个控件next 放到当前行的第一位
childArray[childArray.length]=next;
//如果li的总数刚好等于列数 则需要删除最后一列
if(culs.childNodes.length==collength)
{
//将最后一个赋给next控制
next=culs.childNodes[culs.childNodes.length-1];
//删除最后一个
culs.removeChild(next);
}
}
//去除所有的元素放入数组中 因为上一个控件的最后一个放在了第一位
for(var j=0;j<=culs.childNodes.length ;j++)
{
//因为添加一个删除一个 最新的一个 用于是第一个位置
childArray[childArray.length]=culs.childNodes[0];
//删除添加的那个
culs.removeChild(culs.childNodes[0]);
}
//再将排好序的数组控件添加的当前的ul上
for(var j=0;j<childArray.length;j++)
{
var ctx=childArray[j];
//添加子元素
culs.appendChild(ctx)
}
}
//lastnext用于控制最后一行是否刚好等于列数 如果是 新添加一个ul
if(lastnext!=null)
{
//创建ul
var ul=document.createElement("ul");
//添加最后一个元素为子元素
ul.appendChild(lastnext);
//div上添加该ul为子元素
document.getElementById("total").appendChild(ul);
}
}
</script>
</head>
<body>
<div id="total">
<ul>
<li>
aaa
</li>
<li>
bbb
</li>
</ul>
</div>
<input id="text">
<input type="button" value="add" onclick="add()" />
</body>
</html>