2011-06-24 83 views
1

目標:
在html頁面中顯示計算值。無法顯示計算值

問題:

你已經點擊了提交 按鈕後,計算將 開始。此後,通過執行 「window.onload」,頁面 開始再次重新加載。這個consq使得 我無法查看計算結果。

我只想「window.onload」加載一次,然後我想通過按提交按鈕添加更多的數據,而無需重新加載整個頁面。按下提交按鈕後,該數據應該可見。

// fullmetalboy


<script type ="text/javascript" charset="utf-8" src="scripts/data.js"></script> 
</head> 
<body> 
    <div id ="container"> 
     <div id ="header"> 

     </div> 
     <div id ="content"> 

      <table id ="pricetable"> 
       <thead> 
        <tr> 
         <th>Articlenumber</th> 
         <th>Product</th> 
         <th>Name</th> 
         <th>Price</th> 
         <th>Quantity</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>223</td> 
         <td>a</td> 
         <td>a</td> 
         <td>250</td> 
         <td><input type ="text" size ="3" value ="1"/></td> 
        </tr> 
        <tr> 
         <td>223</td> 
         <td>a</td> 
         <td>a</td> 
         <td>250</td> 
         <td><input type ="text" size ="3" value ="1"/></td> 
        </tr> 
        <tr> 
         <td>223</td> 
         <td>a</td> 
         <td>a</td> 
         <td>250</td> 
         <td><input type ="text" size ="3" value ="1"/></td> 
        </tr> 
        <tr> 
         <td>223</td> 
         <td>a</td> 
         <td>a</td> 
         <td>250</td> 
         <td><input type ="text" size ="3" value ="1"/></td> 
        </tr> 
       </tbody> 
      </table> 





     </div> 
    </div> 
</body> 


window.onload = init; 




function init() 
{ 
    createForm(); 
    addColumn(); 
    addRow(); 
} 



function addColumn() 
{ 

    var tabellHead = document.getElementById("pricetable").tHead; 

    for (var a=0; a<tabellHead.rows.length; a++) 
    { 
     var nyTH = document.createElement('th'); 
     tabellHead.rows[a].appendChild(nyTH); 
     nyTH.innerHTML = "Summa"; 
    } 


    var tabellBody = document.getElementById("pricetable"); 

    for (var b=1; b<tabellBody.rows.length; b++) 
    { 
     var nyTD = document.createElement('td'); 
     tabellBody.rows[b].appendChild(nyTD); 
     nyTD.innerHTML = ""; 
    } 

} 



function addRow() 
{ 
    var newRow = document.createElement('tr'); 
    newRow.setAttribute('id', "sumrow"); 



    var ca1 = document.createElement('td'); 
    var ca2 = document.createElement('td'); 
    var ca3 = document.createElement('td'); 
    var ca4 = document.createElement('td'); 
    var ca5 = document.createElement('td'); 
    var ca6 = document.createElement('td'); 

    var text = document.createTextNode("asdf"); 


    var font = document.createElement('font'); 
    font.setAttribute('color', 'white'); 
    font.appendChild(text); 



    ca6.appendChild(font); 

    newRow.appendChild(ca1); 
    newRow.appendChild(ca2); 
    newRow.appendChild(ca3); 
    newRow.appendChild(ca4);   
    newRow.appendChild(ca5);  
    newRow.appendChild(ca6);  

    var t = document.getElementById('pricetable'); 

    t.appendChild(newRow); 
} 



function createForm() 
{ 
    var t = document.getElementById('content'); 

    var a = "<form><input onclick='tttest();' value='Rensa' type='submit'></form>"; 

    t.innerHTML += a; 
} 




function calc() 
{ 



     var lass = document.getElementById("pricetable"); 

     var tabellBody = asss.getElementsByTagName("tr"); 


     for (var b=1; b<tabellBody.length; b++) 
     { 
      var godis = tabellBody[b].cells[4].childNodes[0]; 
      var godia = tabellBody[b].cells[3]; 

      var a = godia.innerHTML * godis.value; 

      var text = document.createTextNode(a); 


      //tabellBody.rows[b].cells[5].innerHTML = a; 

      var celler = tabellBody[b].getElementsByTagName("td"); 

      var medelelement = celler[celler.length - 1]; 

      medelelement.appendChild(text); 

     } 


} 

回答

0

只需將提交按鈕更改爲普通按鈕?

var a = "<form><input onclick='tttest();' value='Rensa' type='button' /></form>"; 
1

在onclick處理程序就返回false從提交按鈕時,應防止形式從提交

$('input[type=submit]').click(function() { 
    /*do my calc stuff*/ 
    return false; 
}); 
1

提交按鈕應該返回false,這樣

onsubmit = "calc(); return false;" 
0

你是提交表單,因此您的頁面顯然會重新加載。

您必須要麼

a)防止表單提交併計算結果。

b)使用AJAX提交表單而不必重新加載頁面。