`
fuhao9611
  • 浏览: 85375 次
  • 性别: Icon_minigender_1
  • 来自: 陕西 西安
最近访客 更多访客>>
社区版块
存档分类
最新评论

JavaScript例子—实现行的增加、删除、全选、反选

JavaScript音乐prototypeHTMLJ# 
阅读更多
   今天偶尔上一个音乐网站发现音乐网站里面都提供全选和反选操作，觉得不错，加之最近项目上有相似之处，所以总结如下：
   说明：addItem()实在敲回车后自动添加一行。这样用户体验比较好！
   实现功能:实现行的增加，删除，全选，反选，金额的计算，四舍五入等。
   问题：在如果使用模板来添加新行add(tbodyid)的话，那么第一行的任何数据都会被带到下一个新添加的行。
   解决办法：不使用模板adds(tbodyid)来添加新行就可以解决这个问题。
customer.js: 
/**
 * @author fuhao
 * @param {Object} tbodyid
 * 首先在Html页面上定义一个标准的table模板
 * table的子节点是tbody
 * tbody的子节点是tr
 * tr的子节点是td
 * td的子节点是checkbox和input
 */
// 以table模板为标准，添加新的行的方法
// 该方法带来的问题：新添加的行会将模板行的数据也带下来了
// 解决办法：adds(tbodyid)方法可以解决这个问题
function add(tbodyid){
	if(tbodyid==null){
		alert("该方法需要的参数不正确");
		return ;
	}
	// 得到tbody,也可以使用prototype.js里面的$(tbodyid)
	var tbody = document.getElementById(tbodyid);
	// var tbody = $(tbodyid);
	// 获得tbody下的索引为1的tr
	var trtemplate = tbody.childNodes[1];
	// 得到tr下的td数组
	var tds = trtemplate.childNodes;
	// 得到该tr下所有td数组的长度
	var trlength = tds.length;
	var tr = document.createElement("tr");
	for(var i=0;i<trlength;i++){
		var td = document.createElement("td");
		// 设置td的式样标记
		td.className = tds[i].className;
		var content = tds[i].innerHTML;
		td.innerHTML = content;
		tr.appendChild(td);	
	}
	tbody.appendChild(tr);
}
// 删除选中行的方法
function del(name,tbodyid){
	if(name==null){
		alert("该方法需要的参数不正确");
		return ;
	}
	// 获得数组
	var names = document.getElementsByName(name);
	var tbody= document.getElementById(tbodyid);
	// 获得数组的长度
	var length = names.length;
	if(length==1){
		alert("请至少保留一条记录");
		return ;
	}
	// 定义一个数组
	var arr = new Array();
	try{
		for(var i=0;i<length;i++){
			if(names[i].checked==true){
				// 将checkbox的父节点(td)的父节点(tr)放入数组里面
				arr.push(names[i].parentNode.parentNode);
			}
		}
	}catch(e){
		alert("捕获到的异常是:"+e);
	}
	if(arr.length==0){
		alert("请至少选择一条删除");
		return ;
	}
	var delsure = confirm("确认要删除所选记录吗?");
	if(!delsure){
		return ;
	}
	for(var j=0;j<arr.length;j++){
		if(arr.length == length){
			alert("请至少保留一条记录");
			return ;
		}
		// 如果引入prototype_1.5.js的话那么使用Element.remove(arr[j]);达到删除的目的
		// Element.remove(arr[j]);
		tbody.removeChild(arr[j]);
	}
}
// 敲回车，则添加新的一行
function addItem(tbodyid){
	// 13代表回车
	if(event.keyCode==13){
		add(tbodyid);
	}
}
// 全部选择
function checkAll(name){
	// 首先获得所有checkbox集合
	var names = document.getElementsByName(name);
	for(var i=0;i<names.length;i++){
		names[i].checked=true;
	}
}
// 取消选择--反选
function cancelCheck(name){
	var names = document.getElementsByName(name);
	var length = names.length;
	for(var i=0;i<length;i++){
		if(names[i].checked){
			names[i].checked = false;
		}else{
			names[i].checked = true;
		}
	}
}

//用于自动补0的方法 如:5--5.00,5.5--5.50
function mend(number){
	var str = number+"";
	if (str.indexOf(".")==-1){ //说明没有小数点
		return str+".00";
	}else{ //说明有小数点
		var tmp = str.substring(str.indexOf(".")+1);
	    if (tmp.length==0) return str+"00";
		if (tmp.length==1) return str+"0";
		if (tmp.length>=2) return str.substring(0,str.indexOf(".")+3);
	}
}

//用于四舍五入的方法
function ForDight(Dight,How) {  
   Dight = Math.round(Dight*Math.pow(10,How))/Math.pow(10,How);  
   return  mend(Dight);  
} 
// 统一的错误提示方法
function showError(str,b){
	// 首先获得div
	var div = document.getElementById("div");
	// 显示错误提示语句
	var strr = "<img src='image/error_m.gif' /><font color='red'>" +str+ "</font>";
	if(b == false){
		div.innerHTML = strr;
		div.style.display = "";
	}else{
		div.style.display = "none";
	}
}
// 计算(这里以数量作为参照物)
function calc(obj){
	// obj.parentElement获取对象层次中的父对象
	var td = obj.parentElement;
	var tr = td.parentElement;
	var numbers = tr.childNodes[4].childNodes[0].value;       // 数量
	//alert("numbers:"+numbers);
	var faceValue = tr.childNodes[2].childNodes[0].value;     //面值
	//alert("faceValue:"+faceValue);
	var additionValue = tr.childNodes[3].childNodes[0].value; //附赠
	//alert("additionValue:"+additionValue);
	//判断为空或者不为数字
	if(numbers=="" || faceValue=="" || additionValue=="" || isNaN(numbers) || isNaN(faceValue) || isNaN(additionValue)){
		// alert("--你的输入有误，数量为非空正整数,面值和附赠应为非空正数--");
		tr.childNodes[5].childNodes[0].value = "";
		tr.childNodes[6].childNodes[0].value = "";
		tr.childNodes[7].childNodes[0].value = "";
		showError("你的输入有误，数量为非空正整数,面值和附赠应为非空正数",false);
		return ;
	}else{
		showError("",true);
	}
	//判断是否小于零或者数量为整数
	if(numbers<=0*1 || faceValue<=0*1 || additionValue<=0*1 || numbers.indexOf(".")!=-1){
		// alert("--你的输入有误，数量为非空正整数,面值和附赠应为非空正数--");
		tr.childNodes[5].childNodes[0].value = "";
		tr.childNodes[6].childNodes[0].value = "";
		tr.childNodes[7].childNodes[0].value = "";
		showError("你的输入有误，数量为非空正整数,面值和附赠应为非空正数",false);
		return ;
	}else{
		showError("",true);
	}
	var faceValues = numbers*faceValue;    //面值金额
	var additionValues = numbers*additionValue;//附赠金额
	var faceValueAll = faceValues+additionValues;  //面值总额
	// 赋值	
	tr.childNodes[5].childNodes[0].value = ForDight(faceValues,2);
	tr.childNodes[6].childNodes[0].value = ForDight(additionValues,2);
	tr.childNodes[7].childNodes[0].value = ForDight(faceValueAll,2);
}
// 计算实收金额的方法
function calcs(obj){
	// obj.parentElement获取对象层次中的父对象
	var td = obj.parentElement;
	var tr = td.parentElement;
	var numbers = tr.childNodes[4].childNodes[0].value;       // 数量
	var price = tr.childNodes[8].childNodes[0].value;		  //单价
	var agio = tr.childNodes[9].childNodes[0].value;		  //折扣
	if(numbers=="" || price=="" || isNaN(numbers) || isNaN(price) || isNaN(agio)){
		tr.childNodes[10].childNodes[0].value = "";
		showError("数量应该为非空正整数，单价和折扣应为非空正数",false);
		return ;
	}else{
		showError("",true);
	}
	if(numbers<=0*1 || numbers.indexOf(".")!=-1 || price<=0*1){
		tr.childNodes[10].childNodes[0].value = "";
		showError("数量应该为非空正整数,单价不能小于零",false);
		return ;
	}else{
		showError("",true);
	}
	var factValues = "" ;
	if(agio==""){//说明没有填写折扣 
		factValues = price*numbers;
		tr.childNodes[10].childNodes[0].value = ForDight(factValues,2);
	}else{
		if(agio<=0*1 || agio>10){
			tr.childNodes[10].childNodes[0].value = "";
			showError("折扣应该大于0小于10",false);
			return ;
		}else{
			showError("",true);
			factValues = price*numbers*agio;
			tr.childNodes[10].childNodes[0].value = ForDight(factValues,2);
		}	
	}
	
}

// 不以模板为标准添加新的一行
// obj.setAttribute()--把指定的属性设置成为指定的字符串值，如果该属性不存在则添加一个新的属性
function adds(tbodyid){
	var tbody = document.getElementById(tbodyid);
	var tr = document.createElement("tr");
	
	var td = document.createElement("td");
	var td1 = document.createElement("td");
	var td2 = document.createElement("td");
	var td3 = document.createElement("td");
	var td4 = document.createElement("td");
	var td5 = document.createElement("td");
	var td6 = document.createElement("td");
	var td7 = document.createElement("td");
	var td8 = document.createElement("td");
	var td9 = document.createElement("td");
	var td10 = document.createElement("td");
	var checkbox = document.createElement("<input type='checkbox' name='checkName' />");
	checkbox.setAttribute("align","center");
	
	var input1 = document.createElement("<input name='cardName' type='text' size='12' value='没有模板的' readonly='true' />");
	var input2 = document.createElement("<input name='faceValue' type='text' size='12'  onchange='calc(this);calcs(this)' />");
	var input3 = document.createElement("<input name='additionValue' type='text' size='12'  onchange='calc(this)' />");
	var input4 = document.createElement("<input name='cardNumber' type='text' size='12'  onchange='calc(this);calcs(this)' />");
	var input5 = document.createElement("<input name='faceValues' type='text' size='12' readonly='true' />");
	var input6 = document.createElement("<input name='additionValues' type='text' size='12' readonly='true' />");
	var input7 = document.createElement("<input name='faceValuesAll' type='text' size='12' readonly='true' />");
	var input8 = document.createElement("<input name='price' type='text' size='12'  onchange='calcs(this)' />");
	var input9 = document.createElement("<input name='agios' type='text' size='12'  onchange='calcs(this)' />");
	var input10 = document.createElement("<input name='factValue' type='text' readonly='true' size='12'  onchange='calcs(this)' />");

	td.setAttribute("align","center");
	td1.setAttribute("align","center");
	td2.setAttribute("align","center");
	td3.setAttribute("align","center");
	td4.setAttribute("align","center");
	td5.setAttribute("align","center");
	td6.setAttribute("align","center");
	td7.setAttribute("align","center");
	td8.setAttribute("align","center");
	td9.setAttribute("align","center");
	td10.setAttribute("align","center");
	
	input1.setAttribute("align","center");
	input2.setAttribute("align","center");
	input3.setAttribute("align","center");
	input4.setAttribute("align","center");
	input5.setAttribute("align","center");
	input6.setAttribute("align","center");
	input7.setAttribute("align","center");
	input8.setAttribute("align","center");
	input9.setAttribute("align","center");
	input10.setAttribute("align","center");

	td.appendChild(checkbox);
	td1.appendChild(input1);
	td2.appendChild(input2);
	td3.appendChild(input3);
	td4.appendChild(input4);
	td5.appendChild(input5);
	td6.appendChild(input6);
	td7.appendChild(input7);
	td8.appendChild(input8);
	td9.appendChild(input9);
	td10.appendChild(input10);
		
	tr.appendChild(td);
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tr.appendChild(td4);
	tr.appendChild(td5);
	tr.appendChild(td6);
	tr.appendChild(td7);
	tr.appendChild(td8);
	tr.appendChild(td9);
	tr.appendChild(td10);

	tbody.appendChild(tr);
}

calc.html: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript例子</title>
<script src="js/customer.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="#" onclick="add('DispatchItemTable')">增加一行(使用模板)</a>  
<a href="#" onclick="del('checkName','DispatchItemTable')">删除</a>  
<a href="#" onclick="checkAll('checkName')">全选</a>  
<a href="#" onclick="cancelCheck('checkName')">反选</a>
<a href="#" onclick="adds('DispatchItemTable')">增加一行(不使用模板)</a>
  面值金额=面值*数量  附赠金额=附赠*数量  
面值总额=面值金额+附赠金额  实收金额=单价*数量*折扣
</p>
<table id="table" align='center' border='1' bordercolor='#0690AE' cellpadding='0' cellspacing='0' style='border-collapse:collapse;'  width='100%'>
  <tbody id="DispatchItemTable">
  <tr>
    <td nowrap class='data_list_th'>序号</td>
    <td class='data_list_th'>卡名称</td>
    <td class='data_list_th'><font color="red">*</font>面值(元)</td>
    <td class='data_list_th'><font color="red">*</font>附赠(元)</td>
    <td class='data_list_th'><font color="red">*</font>数量(枚)</td>
    <td class='data_list_th'>面值金额(元)</td>
    <td class='data_list_th'>附赠金额(元)</td>
	<td class='data_list_th'>面值总额(元)</td>
	<td class='data_list_th'><font color="red">*</font>单价(元)</td>
	<td class='data_list_th'><font color="red">*</font>折扣</td>
	<td class='data_list_th'>实收金额(元)</td>
  </tr>
  <tr id="testc">
    <td class='data_list_td'><input type="checkbox" name="checkName" /></td>
    <td class='data_list_td'><input name="cardName" type="text" size="12" value="由模板生成的" readonly="true" onkeydown="addItem('DispatchItemTable')" /></td>
    <td class='data_list_td'><input name="faceValue" type="text" size="12"  onchange="calc(this);calcs(this)" /></td>
    <td class='data_list_td'><input name="additionValue" type="text" size="12"  onchange="calc(this)" /></td>
    <td class='data_list_td'><input name="cardNumber" type="text" size="12"  onchange="calc(this);calcs(this)" /></td>
    <td class='data_list_td'><input type="text" name="faceValues" size="12" readonly="true" /></td>
    <td class='data_list_td'><input type="text" name="additionValues" size="12" readonly="true" /></td>
	<td class='data_list_td'><input type="text" name="faceValuesAll" size="12" readonly="true" /></td>
	<td class='data_list_td'><input type="text" name="price" size="12" onchange="calcs(this)" /></td>
	<td class='data_list_td'><input type="text" name="agios" size="12" onchange="calcs(this)" /></td>
	<td class='data_list_td'><input type="text" name="factValue" size="12" readonly="true" /></td>
  </tr>
</tbody>
</table>
<p><div align="center" id="div" style="display:none;" /></p>
</body>
</html>
  • calc.zip (31.2 KB)
  • 描述: 这个是修改后的例子！之前的哪个在删除有点问题！
  • 下载次数: 36
  • calc.zip (32.7 KB)
  • 描述: 第三次修改后的代码！
  • 下载次数: 393
分享到：
| 第一个Ajax例子
评论
3 楼 wen870105 2008-04-01  
这个代码在FF下是有问题的
我有用的是ff 2.0.0.13
2 楼 fuhao9611 2007-04-23  
如果引入prototype_1.5.js的话那么使用Element.remove(arr[j]);达到删除的目的
1 楼 nanhey 2007-04-19  
删除好像有问题，删不掉
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Javascript实现全选反选

    在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...

    jQuery表格行全选反选单选代码

    jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。

    简单实现全选反选功能（html）

    接下来，我们引入jQuery库，并创建一个名为`select.js`的JavaScript文件，来处理全选/反选的逻辑： ```javascript $(document).ready(function() { // 当全选按钮被点击时，触发事件 $('#selectAll').click...

    JS简单表格列表全选反选代码.zip

    本示例中的"JS简单表格列表全选反选代码"是一个使用原生JS编写的功能，它允许用户通过点击表头按钮来实现表格数据的全选和反选操作。这个功能在处理大量数据时特别有用，例如在用户需要批量操作表格项时。 1. **...

    三种方式实现checkbox全选，反选

    以下是三种实现Checkbox全选和反选的方法，以及它们的JavaScript和Java实现细节。 ### 方法一：使用`checked`属性 **JavaScript实现**： 在JavaScript中，可以通过获取全选按钮的`checked`属性来控制所有复选框的...

    checkbox实现全选和反选经典例子

    综上所述，"checkbox实现全选和反选经典例子"是一个关于如何在Web应用中利用Checkbox控件提高用户交互性的实践教程。通过理解Checkbox的基本操作，结合服务器控件的事件处理和逻辑编程，我们可以创建出高效且易于...

    基于jQuery的三个JS复选框全选反选例子.zip

    本示例“基于jQuery的三个JS复选框全选反选例子.zip”聚焦于如何利用jQuery实现复选框的全选与反选功能，这在表格或者多选项选择场景中非常常见。以下将详细介绍这一功能的实现方式。 首先，我们需要理解复选框...

    原生JS表格列表全选反选代码.zip

    这个"原生JS表格列表全选反选代码"就是一个解决此类问题的示例。下面将详细介绍这个示例中涉及的关键知识点。 1. **HTML表格（`&lt;table&gt;`）**： HTML表格是网页中用于组织数据的基本元素，由`&lt;table&gt;`、`&lt;tr&gt;`（行...

    js实现全选和反选功能

    在JavaScript中，全选和反选...总的来说，通过JavaScript实现全选和反选功能并不复杂，关键在于正确地获取和操作复选框的`checked`属性。了解这些基础知识后，你可以灵活地应用在各种Web项目中，提高用户的交互体验。

    JQ 复选框全选反选

    总结来说，"JQ 复选框全选反选"是jQuery中常见的用户交互功能，通过选择器定位复选框，绑定事件处理函数，以及利用DOM操作改变元素属性，可以轻松实现这一功能。在实际开发中，理解并掌握这些基础技巧对于提升用户...

    AngularJS实现全选反选功能

    AngularJS实现全选反选功能的知识点可以分为以下几个方面进行详细介绍： 1. AngularJS基本概念：AngularJS是一种流行的前端JavaScript框架，由Google维护和开发。它的主要目的是通过扩展HTML来简化Web应用的开发。...

    AngularJS 实现购物车全选反选功能

    购物车全选反选功能是电商网站中常见的需求，允许用户一次性选择或取消选择所有商品。 首先，我们需要创建一个HTML模板，该模板包含一个表格来展示购物车中的商品，以及用于全选和反选的复选框。在这个例子中，我们...

    复选框的全选和反选、复选框的全选和反选

    复选框在用户界面设计中扮演着重要角色，它们允许用户在多个选项中进行多选操作。全选和反选功能则是复选框常用的一种交互模式...在实际开发中，我们需要根据具体的技术栈和业务需求，灵活地实现和优化全选和反选功能。

Magicbox
Global site tag (gtag.js) - Google Analytics