js取value值问题

Question

<script>
function add01() {
var tableRow = document.getElementById('TabRow1');
var v = tableRow.firstChild.childNodes;
var len = v.length; for(var i=0; i <= len; i++){
var values = document.getElementById("B01").value*document.getElementById("C01").value;
//if (values>0){
document.getElementById("D01").value = values;
//}
}
}
</script>
<table border='0' cellpadding='0' cellspacing='1' width='100%' id='TabRow1'>
<tr><td>
<input type="text" size="4" id="A01" name="A" value="">
<input type="text" size="8" id="B01" name="B" value="">
<input type="text" size="8" id="C01" name="C" value="" onKeyUp="add01();"><input type="text" size="4" id="A01" name="A" value="">
<input type="text" size="8" id="B01" name="B" value="">
<input type="text" size="8" id="C01" name="C" value="" onKeyUp="add01();">
<td><tr></table>
<script>
function add02() {
var tableRow = document.getElementById('TabRow2');
var v = tableRow.firstChild.childNodes;
var len = v.length; for(var i=0; i <= len; i++){
var values = document.getElementById("B02").value*document.getElementById("C02").value;
//if (values>0){
document.getElementById("D02").value = values;
//}
}
}
</script>
<table border='0' cellpadding='0' cellspacing='1' width='100%' id='TabRow2'>
<tr><td>
<input type="text" size="4" id="A02" name="A" value="">
<input type="text" size="8" id="B02" name="B" value="">
<input type="text" size="8" id="C02" name="C" value="" onKeyUp="add02();"><input type="text" size="4" id="A02" name="A" value="">
<input type="text" size="8" id="B02" name="B" value="">
<input type="text" size="8" id="C02" name="C" value="" onKeyUp="add02();">
<td><tr></table>
怎么才能各取各的值

Answer 1

不好意思 发错了 完整代码是这样的
<script>
function add01() {
var tableRow = document.getElementById('TabRow1');
var v = tableRow.firstChild.childNodes;
var len = v.length; for(var i=0; i <= len; i++){
var values = document.myform.B[i].value*document.myform.C[i].value;
//if (values>0){
document.myform.D[i].value = values;
//}
}
}//给table增加一行   
function addRow1() {   
var tableRow = document.getElementById('TabRow1');
var cloneTab = document.getElementById('TabRow13');
tableRow.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true));
  
var v = tableRow.firstChild.childNodes;
var len = v.length;
for(var i=1;i<len;i++){
v[i].childNodes[0].firstChild.id=i;  //给第一个单元格id赋值
}
}
  
//给table删除一行   
function delRow1(){
//删除方法一 根据选择删除
//var tableRow = document.getElementById('TabRow1');
//var isChecked = document.getElementsByName('isChecked');
//var len = isChecked.length;
//for(var i=len-1;i>=0;i--){
//if(isChecked[i].checked==true){
//tableRow.firstChild.removeChild(isChecked[i].parentNode.parentNode);
//}
//} //删除方法二 自动删除最后一行
var tb = document.getElementById("TabRow1");
if(tb.hasChildNodes){
var lastchild = tb.childNodes[0].childNodes[tb.childNodes[0].childNodes.length-1];
if(lastchild){
if(confirm("确认删除最后一行吗?\n\n删除该行,所填写的数据也会被删除!确定删除吗?")){
var removednode = lastchild.parentNode.removeChild(lastchild);
return true;
}else{
return false;
}
}
}
}
</script>
<input type='button' id='btnAdd' onclick='addRow1();' title='新增加一条' value='加' class='chkbutton' />
<input type='button' id='btnDel' onclick='delRow1();' title='删除最后一行' value='删' class='chkbutton' />
<table border='0' cellpadding='0' cellspacing='1' width='100%' id='TabRow13'>
   <tr>
<td><input type="text" size="8" name="B" value=""></td>
<td><input type="text" size="8" name="C" value="" onKeyUp="add01();"></td>
<td><input type="text" size="10" name="D" value=""></td>
   </tr>
</table>
<table border='0' cellpadding='0' cellspacing='1' width='100%' id='TabRow1'></table><script>
function add02() {
var tableRow = document.getElementById('TabRow2');
var v = tableRow.firstChild.childNodes;
var len = v.length; for(var i=0; i <= len; i++){
var values = document.myform.B[i].value*document.myform.C[i].value;
//if (values>0){
document.myform.D[i].value = values;
//}
}
}//给table增加一行   
function addRow2() {   
var tableRow = document.getElementById('TabRow2');
var cloneTab = document.getElementById('TabRow14');
tableRow.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true));
  
var v = tableRow.firstChild.childNodes;
var len = v.length;
for(var i=1;i<len;i++){
v[i].childNodes[0].firstChild.id=i;  //给第一个单元格id赋值
}
}
  
//给table删除一行   
function delRow2(){
//删除方法一 根据选择删除
//var tableRow = document.getElementById('TabRow2');
//var isChecked = document.getElementsByName('isChecked');
//var len = isChecked.length;
//for(var i=len-1;i>=0;i--){
//if(isChecked[i].checked==true){
//tableRow.firstChild.removeChild(isChecked[i].parentNode.parentNode);
//}
//} //删除方法二 自动删除最后一行
var tb = document.getElementById("TabRow2");
if(tb.hasChildNodes){
var lastchild = tb.childNodes[0].childNodes[tb.childNodes[0].childNodes.length-1];
if(lastchild){
if(confirm("确认删除最后一行吗?\n\n删除该行,所填写的数据也会被删除!确定删除吗?")){
var removednode = lastchild.parentNode.removeChild(lastchild);
return true;
}else{
return false;
}
}
}
}
</script><input type='button' id='btnAdd' onclick='addRow2();' title='新增加一条' value='加' class='chkbutton' />
<input type='button' id='btnDel' onclick='delRow2();' title='删除最后一行' value='删' class='chkbutton' />
<table border='0' cellpadding='0' cellspacing='1' width='100%' id='TabRow14'>
   <tr>
<td><input type="text" size="8" name="B" value=""></td>
<td><input type="text" size="8" name="C" value="" onKeyUp="add02();"></td>
<td><input type="text" size="10" name="D" value=""></td>
   </tr>
</table>
<table border='0' cellpadding='0' cellspacing='1' width='100%' id='TabRow2'></table>

Answer 2

楼主不觉得这样Add01、Add02重复？要是有30行，那不是要Add30了么？

Answer 3

还是不明白啥意思。。
IE能跑，FIREFOX不兼容。

Answer 4

我也不知道怎么表达，如果实在不明白我的意思
可在代码前后加上测试下大概就明白了前<form name="myform" method="post">
后</form>

Answer 5

<script>
function add(obj){
var c = obj;
var a, b, t;
if(c.value=="" || isNaN(c.value)) return false;
t = c;
do{
t = t.previousSibling;
if(t.nodeType==1) if(t.tagName.toLowerCase()=="input"){
b = t;
break;
}
}while(true);
do{
t = t.previousSibling;
if(t.nodeType==1) if(t.tagName.toLowerCase()=="input"){
a = t;
break;
}
}while(true);
if(b.value=="" || isNaN(b.value)) return false;
a.value = b.value * c.value;
}
</script>
<table border='0' cellpadding='0' cellspacing='1' width='100%' id='TabRow1'>
<tr><td>
<input type="text" size="4" id="A01" name="A" value="">
<input type="text" size="8" id="B01" name="B" value="">
<input type="text" size="8" id="C01" name="C" value="" onKeyUp="add(this);">
<input type="text" size="4" id="A01" name="A" value="">
<input type="text" size="8" id="B01" name="B" value="">
<input type="text" size="8" id="C01" name="C" value="" onKeyUp="add(this);">
<td><tr></table>
<table border='0' cellpadding='0' cellspacing='1' width='100%' id='TabRow2'>
<tr><td>
<input type="text" size="4" id="A02" name="A" value="">
<input type="text" size="8" id="B02" name="B" value="">
<input type="text" size="8" id="C02" name="C" value="" onKeyUp="add(this);">
<input type="text" size="4" id="A02" name="A" value="">
<input type="text" size="8" id="B02" name="B" value="">
<input type="text" size="8" id="C02" name="C" value="" onKeyUp="add(this);">
<td><tr></table>

Answer 6

上面表达错了 正确的是这个<form name="myform" method="post">
第1个
<script>
function add01() {
var tableRow = document.getElementById('TabRow1');
var v = tableRow.firstChild.childNodes;
var len = v.length;for(var i=0; i <= len; i++){
var values = document.myform.B[i].value*document.myform.C[i].value;
//if (values>0){
document.myform.D[i].value = values;
//}
}
}//给table增加一行   
function addRow1() {   
var tableRow = document.getElementById('TabRow1');
var cloneTab = document.getElementById('TabRow13');
tableRow.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true));
   
var v = tableRow.firstChild.childNodes;
var len = v.length;
for(var i=1;i<len;i++){
v[i].childNodes[0].firstChild.id=i; //给第一个单元格id赋值
}
}
   
//给table删除一行   
function delRow1(){
//删除方法一 根据选择删除
//var tableRow = document.getElementById('TabRow1');
//var isChecked = document.getElementsByName('isChecked');
//var len = isChecked.length;
//for(var i=len-1;i>=0;i--){
//if(isChecked[i].checked==true){
//tableRow.firstChild.removeChild(isChecked[i].parentNode.parentNode);
//}
//}//删除方法二 自动删除最后一行
var tb = document.getElementById("TabRow1");
if(tb.hasChildNodes){
var lastchild = tb.childNodes[0].childNodes[tb.childNodes[0].childNodes.length-1];
if(lastchild){
if(confirm("确认删除最后一行吗?\n\n删除该行,所填写的数据也会被删除!确定删除吗?")){
var removednode = lastchild.parentNode.removeChild(lastchild);
return true;
}else{
return false;
}
}
}
}
</script>
<input type='button' id='btnAdd' onclick='addRow1();' title='新增加一条' value='加' class='chkbutton' />
<input type='button' id='btnDel' onclick='delRow1();' title='删除最后一行' value='删' class='chkbutton' />
<table border='0' cellpadding='0' cellspacing='1' width='100%' id='TabRow13'>
  <tr>
<td><input type="text" size="8" name="B" value=""></td>
<td><input type="text" size="8" name="C" value="" onKeyUp="add01();"></td>
<td><input type="text" size="10" name="D" value=""></td>
  </tr>
</table>
<table border='0' cellpadding='0' cellspacing='1' width='100%' id='TabRow1'></table>
<br><br>第2个
<script>
function add02() {
var tableRow = document.getElementById('TabRow2');
var v = tableRow.firstChild.childNodes;
var len = v.length;for(var i=0; i <= len; i++){
var values = document.myform.B[i].value*document.myform.C[i].value;
//if (values>0){
document.myform.D[i].value = values;
//}
}
}//给table增加一行   
function addRow2() {   
var tableRow = document.getElementById('TabRow2');
var cloneTab = document.getElementById('TabRow14');
tableRow.firstChild.appendChild(cloneTab.firstChild.firstChild.cloneNode(true));
   
var v = tableRow.firstChild.childNodes;
var len = v.length;
for(var i=1;i<len;i++){
v[i].childNodes[0].firstChild.id=i; //给第一个单元格id赋值
}
}
   
//给table删除一行   
function delRow2(){
//删除方法一 根据选择删除
//var tableRow = document.getElementById('TabRow2');
//var isChecked = document.getElementsByName('isChecked');
//var len = isChecked.length;
//for(var i=len-1;i>=0;i--){
//if(isChecked[i].checked==true){
//tableRow.firstChild.removeChild(isChecked[i].parentNode.parentNode);
//}
//}//删除方法二 自动删除最后一行
var tb = document.getElementById("TabRow2");
if(tb.hasChildNodes){
var lastchild = tb.childNodes[0].childNodes[tb.childNodes[0].childNodes.length-1];
if(lastchild){
if(confirm("确认删除最后一行吗?\n\n删除该行,所填写的数据也会被删除!确定删除吗?")){
var removednode = lastchild.parentNode.removeChild(lastchild);
return true;
}else{
return false;
}
}
}
}
</script><input type='button' id='btnAdd' onclick='addRow2();' title='新增加一条' value='加' class='chkbutton' />
<input type='button' id='btnDel' onclick='delRow2();' title='删除最后一行' value='删' class='chkbutton' />
<table border='0' cellpadding='0' cellspacing='1' width='100%' id='TabRow14'>
  <tr>
<td><input type="text" size="8" name="B" value=""></td>
<td><input type="text" size="8" name="C" value="" onKeyUp="add02();"></td>
<td><input type="text" size="10" name="D" value=""></td>
  </tr>
</table>
<table border='0' cellpadding='0' cellspacing='1' width='100%' id='TabRow2'></table>
</form><br><br><br><br>可能有更多个

Answer 7

js操作html的table,包括添加行，删除行