纯javascipt实现表单数据加减 checbox里面存 数量和价格 ID等信息信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>加减</title>
<script type="text/javascript">
 function Add( node)
 {
 
  var inputs=node.parentNode.getElementsByTagName("input");
  var a= new Number(inputs[1].value);
  a=a+1;
  inputs[1].value=""+a;
  ///////////////////////////////////////////////////////
 var grandFather=node.parentNode.parentNode;
 var tds=grandFather.getElementsByTagName("td");
 var td0=tds[1];//价格在第二个
 var inputs0 =td0.getElementsByTagName("input");
 var input0=inputs0[0];
 var price=new Number(input0.value);
 var td1=tds[2];//在这里设置结点 第三个结点里含有个数
    var inputs=td1.getElementsByTagName("input");
    var number= new Number(inputs[1].value); //这里的值是个数
 
 //var checkbox=tds[0].getElementsByTagName("checkbox")[0];//第一个单元格的第一个checkbox为checkbox
 var checkboxs=tds[0].getElementsByTagName("input");//找到对应的checbox
 var checbox=checkboxs[0];
 checbox.value=price+" "+number;
 //alert(checbox.value);
 
 }
 function Sub( node)
 {
  //node.parentNode的类型为单元格
  var inputs=node.parentNode.getElementsByTagName("input");
  var a= new Number(inputs[1].value);
  if(a>1)
  {
  a=a-1;
  }
  inputs[1].value=""+a;
  //////////////////下面是更改checkbox的值////////////////
 var grandFather=node.parentNode.parentNode;
 var tds=grandFather.getElementsByTagName("td");
 var td0=tds[1];//价格在第二个
 var inputs0 =td0.getElementsByTagName("input");
 var input0=inputs0[0];
 var price=new Number(input0.value);
 var td1=tds[2];//在这里设置结点 第三个结点里含有个数
    var inputs=td1.getElementsByTagName("input");
    var number= new Number(inputs[1].value); //这里的值是个数
 
 //var checkbox=tds[0].getElementsByTagName("checkbox")[0];//第一个单元格的第一个checkbox为checkbox
 var checkboxs=tds[0].getElementsByTagName("input");//找到对应的checbox
 var checbox=checkboxs[0];
 checbox.value=price+" "+number;
}
 
function get(node)
{
 if(!node.checked )
 {
  return;
 }
 //document.getElementsByName();
 var grandFather=node.parentNode.parentNode;
 var tds=grandFather.getElementsByTagName("td");
 var td0=tds[1];//价格在第二个
 var inputs0 =td0.getElementsByTagName("input");
 var input0=inputs0[0];
 var price=new Number(input0.value);
 var td1=tds[2];//在这里设置结点 第三个结点里含有个数
    var inputs=td1.getElementsByTagName("input");
    var number= new Number(inputs[1].value); //这里的值是个数
 
 //var checkbox=tds[0].getElementsByTagName("checkbox")[0];//第一个单元格的第一个checkbox为checkbox
 var checkboxs=tds[0].getElementsByTagName("input");//找到对应的checbox
 var checbox=checkboxs[0];
 checbox.value=price+" "+number;
 alert(checbox.value);
}
</script>
</head>
<table >
<tr>
<td>
<input type="checkbox" name="choose" onclick="get(this)" value="abc"/>
<input type="text" name="all" width="40px"/>
</td>
<td>
<input type="text" name="ID"  value="30" width="20px" />
</td>
<td><input value="-"  type="button" onclick="Sub(this)" name="Sub" />
<input type="text" value="8" name="t1" width="20px" readonly="readonly"   />
<input value="+"  type="button" onclick="Add(this)" name="Add"/></td>
</tr>

 

<tr>
<td>
<input type="checkbox" name="choose" onclick="get(this)" value="3"/>
<input type="text" name="all" width="40px"/>
</td>
<td>
<input type="text" name="ID" id="ID" value="2" width="20px" />
</td>
<td><input value="-"  type="button" onclick="Sub(this)" name="Sub" /> <input type="text" value="8" name="t1" width="20px" readonly="readonly" />
<input value="+"  type="button" onclick="Add(this)" name="Add"/></td>
</tr>
</table>
<body>
</body>
</html>

你可能感兴趣的:(纯javascipt实现表单数据加减 checbox里面存 数量和价格 ID等信息信息)