html+jsp+网页股票页面制作

最新推荐文章于 2024-06-27 00:00:03 发布

politeboy

最新推荐文章于 2024-06-27 00:00:03 发布

阅读量3.1k

点赞数 2

文章标签： html js

本文链接：https://blog.csdn.net/politeboy/article/details/83244181

版权

后台操作页面的html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/function.js">
		</script>
	</head>
	<body>
		<table border="2" cellspacing="0"cellpadding="14" width="1200" contenteditable="false" id="table">
			<tr>
				<th><abbr title="全选" id="abbr">  <input type="checkbox" name="" id="" value="" onclick="selectAllCheckbox(this)"/></abbr></th>
				<th>提醒</th>
				<th>代码</th>
				<th>名称</th>
				<th>相关链接</th>
				<th>最低价</th>
				<th>跌涨幅</th>
				<th>涨跌额</th>
				<th>总手</th>
				<th>观手</th>
				<th>买入价</th>
				<th>卖出价</th>
				<th>换手</th>
				<th>金额</th>
				<th>笔记</th>
				<th>删除</th>
			</tr>
			<tr>
				<script type="text/javascript">
					dataGenerator();
				</script>
			</tr>
		</table>
		<div id="">
			<input type="button" name="delete" id="" value="删除" onclick="deletes()"/>
			<input type="button" name="" id="" value="修改" onclick="modify()"/>
			<input type="button" name="" id="" value="增加" onclick="add()"/>
		</div>
	</body>
</html>

jsp代码

function dataGenerator(){
	for(var b=0;b<8;b++){
		document.write("<tr class='stocktable4'></tr>")
		document.write("<td><input type='checkbox' name='checkbox'></td>")
		for (var a=0;a<15;a++) {
			document.write("<td>Data</td>");
		}
	}
}

function selectAllCheckbox(elements){
	var ifChecked=elements.checked;
	var allbox=document.getElementsByName("checkbox");
	var span=document.getElementById("abbr");
		for(var a=0;a<allbox.length;a++){
			if(ifChecked==true){
			 	allbox[a].checked=true;
			 	span.title="取消全选";
			}
			else{
				allbox[a].checked=false;
				span.title="全选";
			}
		}
}
function deletes(){
	var s=document.getElementsByName("checkbox");
	var a=document.getElementById("table");
	for(var b=0;b<s.length;b++){
		if(s[b].checked){
			s[b].parentNode.parentNode.remove();
		}
	}
}

function add(){
    var trs = document.getElementById("table");
	var tr=document.createElement("tr");
	trs.appendChild(tr);
	var td=document.createElement("td");
	td.innerHTML="<input type='checkbox' name='checkbox' />";
	trs.appendChild(td);
	for(var i=0;i<15;i++){
		var td=document.createElement("td");
		td.innerHTML="Data";
		trs.appendChild(td);
	}
}
function modify(){
	var room=document.getElementById("table");
	room.contentEditable=true;
}

1.页面通过jsp代码for循环，利用document.write("")生成table的数据
2.页面的复选框按钮选中一个全部选中通过getElementsByName(“checkbox”)获得母复选框，判断是否被选中，对子复选框进行操作
3.添加abbr标签，数遍停留在复选框，出现信息，通过函数操作实现选中和未选中信息不同
4.添加按钮的方法即通过input type=“button” name=“delete” id="" value=“删除” οnclick=“deletes()”/>获得
其中onclick调用的是delete函数
5.实现增添一行table，var table=getElementsById(“table”),得到table,然后创造var element=document.createElement(),并用table.append(element)添加到table里,最后向element内内中数据element.innerHTML();

function add(){
    var trs = document.getElementById("table");
	var tr=document.createElement("tr");
	trs.appendChild(tr);
	var td=document.createElement("td");
	td.innerHTML="<input type='checkbox' name='checkbox' />";
	trs.appendChild(td);
	for(var i=0;i<15;i++){
		var td=document.createElement("td");
		td.innerHTML="Data";
		trs.appendChild(td);
	}
}

6.删除通过得到相应的element元素，用remove函数删除。

function deletes(){
	var s=document.getElementsByName("checkbox");
	var a=document.getElementById("table");
	for(var b=0;b<s.length;b++){
		if(s[b].checked){
			s[b].parentNode.parentNode.remove();
		}
	}
}