动态文本框数值计算

昨天就有一个例子,我就不写了,发上来<style> 
body{margin:20px auto;text-align:center;} 
</style> 
<script>; 
function bbb(m){ 
  var title = document.getElementById(m); 
  var tr = document.createElement("tr"); 
  tr = document.getElementById("tab").getElementsByTagName("tbody")[0].insertBefore(tr,title); 
  //添加删除项 
var td = document.createElement("td"); 
tr.appendChild(td); 
var  input=document.createElement("input"); 
td.name = 'lp[]'; 
input.setAttribute("type","checkbox"); 
input.attachEvent("onclick",Total);
td.appendChild(input); 
    //添加单价项 
    var td = document.createElement("td"); 
    tr.appendChild(td); 
    var input = document.createElement("input"); 
    td.appendChild(input); 
    input.size=8; 
    input.name = 'lp[unit][]'; 
    input.setAttribute("type","text"); 
    //添加数量项 
    var td = document.createElement("td"); 
    tr.appendChild(td); 
    var input = document.createElement("input"); 
    td.appendChild(input); 
    input.size=10; 
    input.name = 'lp[up][]'; 
    input.setAttribute("type","text"); 
    //添加价格项 
    var td = document.createElement("td"); 
    tr.appendChild(td); 
    var input = document.createElement("input"); 
    td.appendChild(input); 
    input.size=15; 
    input.name = "lp[amount][]"; 
    input.setAttribute("type","text"); 
} 
function remove(){ 
var tab = document.getElementById("tab") 
var tr = tab.getElementsByTagName("tr"); 
for(var i=0 ; i   < tr.length ; i++){ 
var input = tr[i].getElementsByTagName("input"); 
for(var j=0 ;j  <input.length;j++){ 
if(input[j].type == "checkbox" && input[j].checked == true) 
document.getElementById("tab").getElementsByTagName("tbody")[0].removeChild(tr[i]); 
} 
} 
} 
var sum = 0;
function Total(){    var obj =event.srcElement;
var sum1 = obj.parentNode.nextSibling.childNodes[0].value;
var sum2 = obj.parentNode.nextSibling.nextSibling.childNodes[0].value;
    if(obj.checked)
{ obj.parentNode.nextSibling.nextSibling.nextSibling.childNodes[0].value= parseFloat(sum1)+parseFloat(sum2);
sum += parseFloat(obj.parentNode.nextSibling.nextSibling.nextSibling.childNodes[0].value);
document.getElementsByName('lp_subtotal[]')[0].value= sum;
}
else
{
 var tempValue = obj.parentNode.nextSibling.nextSibling.nextSibling.childNodes[0].value;
obj.parentNode.nextSibling.nextSibling.nextSibling.childNodes[0].value="";
sum -= parseFloat(tempValue);
document.getElementsByName('lp_subtotal[]')[0].value= sum;
}
}
</script> 
<body> 
<table border="1" id="tab"> 
<tr class="pa" > 
    <td width="20">  </td> 
       <td width="65" align="center">单价  </td> 
    <td width="80" align="center">数量  </td> 
    <td width="130" align="center">合计  </td> 
      </tr> 
      <tr> 
    <td>  <input type="checkbox" name="lp[]"  onclick="Total()"/>  </td> 
        <td>  <input type="text" size="8" name="lp[unit][]" value="20" />  </td> 
        <td>  <input type="text" size="10" name="lp[qty][]" value="10"/>  </td> 
        <td>  <input type="text" size="15" name="lp[amount][]" />  </td> 
      </tr> 
      <tr id="chfw"> 
    <td colspan="2">  <input type="button" value="增加" onClick="bbb('chfw');"/>&nbsp;  <input type="button" value="删除" onClick="remove()"/>  </td> 
        <td align="right" class="sub_total">总合计  </td> 
        <td>  <input type="text" size="15" name="lp_subtotal[]" />  </td> 
      </tr> 
</table> 
</body> 
</html> 

解决方案 »

  1.   

    --！
    看不懂撒~~二楼仁兄能不能指点一下，小弟基本没做过javascript......
      

  2.   


    <script language="JavaScript">   
    //total************
    function total(){
    var obj = event.srcElement;

    var sum1 = parseFloat(obj.parentNode.previousSibling.childNodes[1].value);
    var sum2 = parseFloat(obj.parentNode.previousSibling.previousSibling.childNodes[1].value);
    obj.value = sum1*sum2;

    }
        function addRow()   
        {
            document.getElementById('add').innerText = "添加描述";
            var row = tabInfo.insertRow(0);
            
            cell0 = row.insertCell(0);
            cell0.innerHTML = "材料/方法<input id=datum class=Input_Text_120 type=text />";
            
            cell1 = row.insertCell(1);
            cell1.innerHTML = "价<input id=price class=Input_Text_120 type=text />";
            
            cell2 = row.insertCell(2);
            cell2.innerHTML = "数量<input id=num class=Input_Text_120 type=text />";
            
            cell3 = row.insertCell(3);
            cell3.innerHTML = "合<input id=sum class=Input_Text_120 type=text />";
    cell3.attachEvent("onclick",total);
            
            cell4 = row.insertCell(4);
            cell4.innerHTML = "<A id='del' style=font-family:宋体;font-size:9pt; title='del' onclick='delRow(this.parentElement.parentElement.rowIndex);'href='javascript:;' name='del'>del</A>";
        }
      
        function delRow(index)
        {                  
          document.getElementById('tabInfo').deleteRow(index);
          tabInfo.rows.length > 0?document.getElementById('add').innerText = "添加描述":document.getElementById('add').innerText = "添加描述";
        }
      
     </script><table id="tabInfo">
    </table>
    <a id="add" style="font-family: 宋体; font-size: 9pt;" title="添中一条描述" onclick="addRow();"
        href="javascript:;" name="add">添加描述</a>
      

  3.   

    <script >   
    var i=0;
        function addRow()   
        {
            document.getElementById("add").innerHTML = "继续添加描述";
    var otab= document.getElementById("tabInfo");
            var row = otab.insertRow(i);
            
            cell0 = row.insertCell(0);
            cell0.innerHTML = "材料/方法<input id='datum"+i+"' class=Input_Text_120 type=text />";
            
            cell1 = row.insertCell(1);
            cell1.innerHTML = "单价<input id='price"+i+"' class=Input_Text_120 onkeyup='sum("+i+")' type=text />";
            
            cell2 = row.insertCell(2);
            cell2.innerHTML = "数量<input id='num"+i+"' class=Input_Text_120 onkeyup='sum("+i+")'type=text />";
            
            cell3 = row.insertCell(3);
            cell3.innerHTML = "合计<input id='sum"+i+"' class=Input_Text_120 type=text />";
            
            cell4 = row.insertCell(4);
            cell4.innerHTML = "<A id='del' style=font-family:宋体;font-size:9pt; title='删除本行' onclick='delRow("+i+");'href='javascript:;' name='del'>删除</A>";
    i++;
        }
      
        function delRow(index)
        {                  
          document.getElementById('tabInfo').deleteRow(index);
          tabInfo.rows.length > 0?document.getElementById('add').innerText = "继续添加描述":document.getElementById('add').innerText = "添加描述";
      i-=1;
        }
      
        function  sum(i)   
        {   
            num1=document.getElementById("price"+i).value;
            num2=document.getElementById("num"+i).value; 
            document.getElementById("sum"+i).value=   num1*num2 ;  
        }</script><table id="tabInfo">
    </table>
    <a id="add" style="font-family: 宋体; font-size: 9pt;" title="添中一条描述" onclick="addRow();"
        href="javascript:;" name="add">添加描述</a>
    不过不知道你的这个添加的行是原来的下方还是上方,
      

  4.   

    to:s_liangchao1s我想把方法添加在price和num两个文本框的onblur事件中.... 自己改了半还，还是没搞定
      

  5.   


    为空判断自己写
    <html>
    <script language="JavaScript">   
    //total************
        function total(){
    var obj = event.srcElement;
    var num1 = parseFloat(obj.value);
    var num2 = parseFloat(obj.parentNode.previousSibling.childNodes[1].value);
    obj.parentNode.nextSibling.childNodes[1].value = num1*num2;


            
        }
        function addRow()   
        {
            document.getElementById('add').innerText = "添加描述";
            var row = tabInfo.insertRow(0);
            
            cell0 = row.insertCell(0);
            cell0.innerHTML = "材料/方法<input id=datum class=Input_Text_120 type=text />";
            
            cell1 = row.insertCell(1);
            cell1.innerHTML = "价<input id=price class=Input_Text_120 type=text />";
            
            cell2 = row.insertCell(2);
            cell2.innerHTML = "数量<input id=num class=Input_Text_120 type=text />";
            cell2.childNodes[1].attachEvent("onblur",total);
            cell3 = row.insertCell(3);
            cell3.innerHTML = "合<input id=sum class=Input_Text_120 type=text />";
     
            
            cell4 = row.insertCell(4);
            cell4.innerHTML = "<A id='del' style=font-family:宋体;font-size:9pt; title='del' onclick='delRow(this.parentElement.parentElement.rowIndex);'href='javascript:;' name='del'>del</A>";
        }
      
        function delRow(index)
        {                  
          document.getElementById('tabInfo').deleteRow(index);
          tabInfo.rows.length > 0?document.getElementById('add').innerText = "添加描述":document.getElementById('add').innerText = "添加描述";
        }
      
     </script><table id="tabInfo">
    </table>
    <a id="add" style="font-family: 宋体; font-size: 9pt;" title="添中一条描述" onclick="addRow();"
        href="javascript:;" name="add">添加描述</a>
    </html>