数据列表增删
来源：互联网 发布：美国好吃的三明治 知乎 编辑：程序博客网 时间：2024/06/06 13:03
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>淘宝DELandADD</title>
<style>
body{margin:0px;padding:0;font-size:14px;}
ul,li,span,p,samp{list-style-type:none;margin:0px;padding:0px;}
#box{width:400px;margin:0 auto;}
#box #top{width:400px;float:left;}
#box #oUl{width:400px;float:left;}
#oUl li{width:400px;height:30px;float:left;margin:10px 0;height:100px;}
.asc{background:#f60;color:#fff;}/*升序*/
.des{background:green;color:#fff;}/*降序**/
.img{width:100px;height:100px;}
.wor{margin:0 10px;}
.lis{margin:0 10px;}
.newImg{width:150px;height:150px;position:absolute;left:128px;top:0px;}
</style>
</head>
<body>
<div id="box">
<div id="top">
<span><input type="checkbox" id="quan">全选</span>
<span style="text-align:center;">内容</span>
<span class="asc">升序</span>
<span><a href="javascript:void(0)" id='add'>添加</a> <a href="javascript:void(0)" id="del">删除</a></span><br>
<input type="text" id="sea-txt"><input type="button" value="查找字段" id="sea-btn"><br>
<div id="addBox" style="display:none;">
请选择图片
<input name="" type="file" id="imgFile"><br>
请输入标题
<input type="type" id="title"><br>
请选择价格
<select id="prce">
<option>20-50</option>
<option>50-100</option>
<option>100-150</option>
<option>150-200</option>
<option>200-250</option>
</select><br>
<input type="button" id="addBtn" value="添加数据">
</div>
<ul id="newKEY">
</ul>
</div>
<ul id="oUl">
<li>
<input type="checkbox">
<img src="images/sp_ico1.jpg" class="img">
<span class="wor">图一图一图一</span>
<span class="lis">50</span>
<span class="lidel"><a href="javascript:void(0)" class="delBtn">删除</a></span>
</li>
<li>
<input type="checkbox">
<img src="images/sp_ico2.jpg" class="img">
<span class="wor">图一图一图一</span>
<span class="lis">40</span>
<span class="lidel"><a href="javascript:void(0)" class="delBtn">删除</a></span>
</li>
<li>
<input type="checkbox">
<img src="images/sp_ico1.jpg" class="img">
<span class="wor">1234345</span>
<span class="lis">40</span>
<span class="lidel"><a href="javascript:void(0)" class="delBtn">删除</a></span>
</li>
</ul>
</div>
<script type="text/javascript">
<!--
//addCLASS
function $$(aclass)
{
var createElment=[];
var allElement=document.getElementsByTagName("*");
for(var i=0;i<allElement.length;i++)
{
if(allElement[i].className == aclass)
{
createElment.push(allElement[i]);
}
}
return createElment;
}
function $(obj){
return document.getElementById(obj)
}
function $$$(obj,parentName)
{
return parentName.getElementsByTagName(obj);
}
var oUl=$("oUl");
var oLi=oUl.getElementsByTagName("li");
var checkOne=$("quan");
var asc=$$("arc")[0];
var _add=$("add");
var _del=$("del");
var sea_txt=$("sea-txt");
var sea_btn=$("sea-btn");
var li_title=$$("wor");
var nKey=$("newKEY");
var imeFile=$("imgFile");
var _title=$("title");
var _prce=$("prce");
var _addBtn=$("addBtn");
var _nBox=$("addBox");
var i=0;
window.onload=function(){
addBtnDate();
selAll();//全选功能
Del();//删除功能
ImgAmp();//图片放大功能
//Seacher();
orderDel();
}
//全选按钮
function selAll()
{
var check=oUl.getElementsByTagName("input");
checkOne.onclick=function(){
for(i=0;i<check.length;i++)
{
check[i].checked=true;
check[i].className="on";
}
}
for(i=0;i<check.length;i++)
{
(function(i){
check[i].onchange=function(){
for(var n=0;n<check.length;n++)
{
if(check[n].checked == true)
{
checkOne.checked =false;
break;
}
}
if(check[i].checked == true)
{
check[i].className="on";
}
else
{
check[i].className="";
}
}
})(i)
}
}
selAll();
//一性次del
function orderDel()
{
_del.onclick=function(){
var ons=$$("on");
console.log(ons.length);
if(ons.length != 0)
{
for(var n=0;n < ons.length;n++)
{
oUl.removeChild(ons[n].parentNode);
}
}
else
{
alert("吾须你懂")
}
}
}
orderDel();
//删除
function Del()
{
var delBtn=$$("delBtn");
for(i=0;i<delBtn.length;i++)
{
delBtn[i].index=i;
delBtn[i].onclick=function(){
oUl.removeChild(oLi[this.index]);
}
}
}
Del();
//升降序,暂时不会。没思路,有考虑用sort，但是列表排无法下手，
function Order()
{
asc.onclick=function(){
}
}
//图片放大
function ImgAmp()
{
//Del();
//console.log(img.length);
var img=$$("img",oUl);
for(i=0;i<img.length;i++)
{
img[i].index=i;
img[i].onmouseover=function(){
var newImg=document.createElement("img");
newImg.src=this.src;
newImg.className="newImg";
this.parentNode.style.position="relative";
this.parentNode.appendChild(newImg);
}
img[i].onmouseout=function(){
this.parentNode.removeChild(this.parentNode.lastChild);
this.parentNode.style.position="static";
}
}
}
ImgAmp();
//查找
function Seacher(){
//sea_txt.onfocus=function(){
var _obj=sea_txt.value;
var _value = new RegExp(_obj)
for(i=0;i<li_title.length;i++)
{
var _wor=li_title[i].innerHTML;
//for(var j=0;j<_wor.length;j++)
//{
// console.log(_wor[j]);
if(_value.test(_wor))
{
var _li=document.createElement("li");
console.log(_li);
_li.innerHTML=_wor;
if(nKey.children.length == 0)
{
nKey.appendChild(_li);
}
else
{
nKey.insertBefore(_li);
}
}
//}
}
//}
}
//Seacher();
function addBtnDate(){
_add.onclick=function(){
if(_nBox.style.display == 'none')
{
_nBox.style.display='block';
addDate();
}
else
{
_nBox.style.display='none';
}
}
//添加数据
function addDate(){
function showDiv()
{
var _newsrc=imeFile.value;
if(_title.value == "")
{
alert("不好意思，这项必须有故凉");
_title.focus();
}
else
{
var _op;
var _option=_prce.options;
var index=_prce.selectedIndex;
_op=_option[index].value;
var newLi=document.createElement("li");
newLi.innerHTML="<input type='checkbox'><img src='" + _newsrc + "' class='img'><span class='wor'>"+ _title.value +"</span><span class='lis'>"+ _op +"</span><span class='lidel'><a href='javascript:void(0)' class='delBtn'>删除</a></span>";
oLi.length ? oUl.insertBefore(newLi,oLi[0]) : oUl.appendChild(newLi);
imeFile.value="";
_title.value="";
_prce.options[0].selected="true";
}
Del();
selAll();
}
_addBtn.onclick=function(){
showDiv();
}
}
}
//-->
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>淘宝DELandADD</title>
<style>
body{margin:0px;padding:0;font-size:14px;}
ul,li,span,p,samp{list-style-type:none;margin:0px;padding:0px;}
#box{width:400px;margin:0 auto;}
#box #top{width:400px;float:left;}
#box #oUl{width:400px;float:left;}
#oUl li{width:400px;height:30px;float:left;margin:10px 0;height:100px;}
.asc{background:#f60;color:#fff;}/*升序*/
.des{background:green;color:#fff;}/*降序**/
.img{width:100px;height:100px;}
.wor{margin:0 10px;}
.lis{margin:0 10px;}
.newImg{width:150px;height:150px;position:absolute;left:128px;top:0px;}
</style>
</head>
<body>
<div id="box">
<div id="top">
<span><input type="checkbox" id="quan">全选</span>
<span style="text-align:center;">内容</span>
<span class="asc">升序</span>
<span><a href="javascript:void(0)" id='add'>添加</a> <a href="javascript:void(0)" id="del">删除</a></span><br>
<input type="text" id="sea-txt"><input type="button" value="查找字段" id="sea-btn"><br>
<div id="addBox" style="display:none;">
请选择图片
<input name="" type="file" id="imgFile"><br>
请输入标题
<input type="type" id="title"><br>
请选择价格
<select id="prce">
<option>20-50</option>
<option>50-100</option>
<option>100-150</option>
<option>150-200</option>
<option>200-250</option>
</select><br>
<input type="button" id="addBtn" value="添加数据">
</div>
<ul id="newKEY">
</ul>
</div>
<ul id="oUl">
<li>
<input type="checkbox">
<img src="images/sp_ico1.jpg" class="img">
<span class="wor">图一图一图一</span>
<span class="lis">50</span>
<span class="lidel"><a href="javascript:void(0)" class="delBtn">删除</a></span>
</li>
<li>
<input type="checkbox">
<img src="images/sp_ico2.jpg" class="img">
<span class="wor">图一图一图一</span>
<span class="lis">40</span>
<span class="lidel"><a href="javascript:void(0)" class="delBtn">删除</a></span>
</li>
<li>
<input type="checkbox">
<img src="images/sp_ico1.jpg" class="img">
<span class="wor">1234345</span>
<span class="lis">40</span>
<span class="lidel"><a href="javascript:void(0)" class="delBtn">删除</a></span>
</li>
</ul>
</div>
<script type="text/javascript">
<!--
//addCLASS
function $$(aclass)
{
var createElment=[];
var allElement=document.getElementsByTagName("*");
for(var i=0;i<allElement.length;i++)
{
if(allElement[i].className == aclass)
{
createElment.push(allElement[i]);
}
}
return createElment;
}
function $(obj){
return document.getElementById(obj)
}
function $$$(obj,parentName)
{
return parentName.getElementsByTagName(obj);
}
var oUl=$("oUl");
var oLi=oUl.getElementsByTagName("li");
var checkOne=$("quan");
var asc=$$("arc")[0];
var _add=$("add");
var _del=$("del");
var sea_txt=$("sea-txt");
var sea_btn=$("sea-btn");
var li_title=$$("wor");
var nKey=$("newKEY");
var imeFile=$("imgFile");
var _title=$("title");
var _prce=$("prce");
var _addBtn=$("addBtn");
var _nBox=$("addBox");
var i=0;
window.onload=function(){
addBtnDate();
selAll();//全选功能
Del();//删除功能
ImgAmp();//图片放大功能
//Seacher();
orderDel();
}
//全选按钮
function selAll()
{
var check=oUl.getElementsByTagName("input");
checkOne.onclick=function(){
for(i=0;i<check.length;i++)
{
check[i].checked=true;
check[i].className="on";
}
}
for(i=0;i<check.length;i++)
{
(function(i){
check[i].onchange=function(){
for(var n=0;n<check.length;n++)
{
if(check[n].checked == true)
{
checkOne.checked =false;
break;
}
}
if(check[i].checked == true)
{
check[i].className="on";
}
else
{
check[i].className="";
}
}
})(i)
}
}
selAll();
//一性次del
function orderDel()
{
_del.onclick=function(){
var ons=$$("on");
console.log(ons.length);
if(ons.length != 0)
{
for(var n=0;n < ons.length;n++)
{
oUl.removeChild(ons[n].parentNode);
}
}
else
{
alert("吾须你懂")
}
}
}
orderDel();
//删除
function Del()
{
var delBtn=$$("delBtn");
for(i=0;i<delBtn.length;i++)
{
delBtn[i].index=i;
delBtn[i].onclick=function(){
oUl.removeChild(oLi[this.index]);
}
}
}
Del();
//升降序,暂时不会。没思路,有考虑用sort，但是列表排无法下手，
function Order()
{
asc.onclick=function(){
}
}
//图片放大
function ImgAmp()
{
//Del();
//console.log(img.length);
var img=$$("img",oUl);
for(i=0;i<img.length;i++)
{
img[i].index=i;
img[i].onmouseover=function(){
var newImg=document.createElement("img");
newImg.src=this.src;
newImg.className="newImg";
this.parentNode.style.position="relative";
this.parentNode.appendChild(newImg);
}
img[i].onmouseout=function(){
this.parentNode.removeChild(this.parentNode.lastChild);
this.parentNode.style.position="static";
}
}
}
ImgAmp();
//查找
function Seacher(){
//sea_txt.onfocus=function(){
var _obj=sea_txt.value;
var _value = new RegExp(_obj)
for(i=0;i<li_title.length;i++)
{
var _wor=li_title[i].innerHTML;
//for(var j=0;j<_wor.length;j++)
//{
// console.log(_wor[j]);
if(_value.test(_wor))
{
var _li=document.createElement("li");
console.log(_li);
_li.innerHTML=_wor;
if(nKey.children.length == 0)
{
nKey.appendChild(_li);
}
else
{
nKey.insertBefore(_li);
}
}
//}
}
//}
}
//Seacher();
function addBtnDate(){
_add.onclick=function(){
if(_nBox.style.display == 'none')
{
_nBox.style.display='block';
addDate();
}
else
{
_nBox.style.display='none';
}
}
//添加数据
function addDate(){
function showDiv()
{
var _newsrc=imeFile.value;
if(_title.value == "")
{
alert("不好意思，这项必须有故凉");
_title.focus();
}
else
{
var _op;
var _option=_prce.options;
var index=_prce.selectedIndex;
_op=_option[index].value;
var newLi=document.createElement("li");
newLi.innerHTML="<input type='checkbox'><img src='" + _newsrc + "' class='img'><span class='wor'>"+ _title.value +"</span><span class='lis'>"+ _op +"</span><span class='lidel'><a href='javascript:void(0)' class='delBtn'>删除</a></span>";
oLi.length ? oUl.insertBefore(newLi,oLi[0]) : oUl.appendChild(newLi);
imeFile.value="";
_title.value="";
_prce.options[0].selected="true";
}
Del();
selAll();
}
_addBtn.onclick=function(){
showDiv();
}
}
}
//-->
</script>
</body>
</html>
- 数据列表增删
- 显示数据列表，并能进行增删改的操作
- Webform GridView列表增删改查结合EF数据绑定
- JSP实现列表增删
- vc++实现对列表框的操作 ado 操作数据库实现对数据的增删 access
- [java]增删改查后给出操作提示后跳转到数据列表的小问题解决[简单实现]
- sharepoint 2010 自定义列表数据的增删改查常用操作 server object model
- sharepoint 2010 自定义列表数据的增删改查常用操作 server object model
- 家庭财务管理系统实战3- 实现列表数据的增删改查功能
- js实现提交前对列表数据的增删改查
- JQuery 实例：表格列表数据 增删改查 窗口(隐藏层)
- js增删改查列表
- 增删改查的列表
- python 列表操作(增删查)
- 批量增删改数据
- 数据的增删改
- 数据的增删改
- 04增删改数据
- NHibernate3版本新特性介绍
- 埃尔米特矩阵
- OCP-043 bitmap indexes on index-Organized Tables
- C#判断是否为图片 .
- 正定矩阵
- 数据列表增删
- 条款6：若不想使用编译器自动生成函数，就该明确拒绝
- Java性能优化技巧集锦
- 跨平台大行其道 CocoaChina开发者大会落幕
- jQuery解密之----执行过程分析
- 关于app store distribution出现的'armv7'与最小版本'3.0'不兼容的问题
- 2012关于C++ const 的全面总结
- Linux结构
- USB OTG mass storage
