JavaScript 예 - 줄 의 증가, 삭제, 전체 선택, 반 선택 실현
17073 단어 JavaScripthtmlprototypeJ#음악.
설명: 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>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
