Question

目标：
在html页面中显示计算的值。

问题：

点击提交后按钮，计算将开始。此后，页面通过执行再次开始重新加载 “在window.onload”。这个问题就是这样我无法查看计算结果。

我只想“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);

        }


}

Answer 1

只需在提交按钮的onclick处理程序中返回false，即可阻止表单提交

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

Answer 2

提交按钮应该返回false，就像这样

onsubmit = "calc(); return false;"

Answer 3

只需将提交按钮更改为普通按钮？

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

Answer 4

您正在提交表单，因此您的页面显然会重新加载。

你必须

a）防止表单提交并计算结果。

b）使用AJAX提交表单而无需重新加载页面。

无法显示计算值

4 个答案: