Question

我一直在尝试将一行和一列添加到表中，我认为我最终已经管理了这一行。现在我尝试使用表格下方的javascript创建一个按钮，该按钮将计算新列中每行的总和，并计算新行中的最后两列。我已经尝试了各种创建按钮的方法，但我似乎无法使它工作，并且你可以看到我不知道如何创建将进行我需要的计算的代码。

这是我的代码：

function addLoadEvent(func) 
{
    var oldonload = window.onload;
    if (typeof window.onload != 'function') 
    {
        window.onload = func;
    } 
    else 
    {
        window.onload = function() 
        {
            oldonload();
            func();
        }
    }
}

function addRow() 
{
    if (!document.getElementById) return false;
    var table = document.getElementById("pricetable");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    row.setAttribute("id","sumrow");

    var cell1 = row.insertCell();
    var cell2 = row.insertCell();
    var cell3 = row.insertCell();
    var cell4 = row.insertCell();
    var cell5 = row.insertCell();
}

function addColumn()
{
    if (!document.getElementById) return false;
    if (!document.createElement) return false;

    var tHead = document.getElementById("pricetable").tHead;
    for (var h=0; h<tHead.rows.length; h++) 
    {
        var newTHead = document.createElement("th");
        tHead.rows[h].appendChild(newTHead);
        newTHead.innerHTML = "Sum";
    }

    var tBody = document.getElementById("pricetable").tBodies[0];
    for (var i=0; i<tBody.rows.length; i++) 
    {
        var newCell = tBody.rows[i].insertCell(-1);
    }
}

function addButton() 
{
    var btn = document.createElement("input");
    input.setAttribute("type", "button");
    input.setAttribute("name","Calc price");

    var foo = document.getElementById("pricetable");
    foo.appendChild(btn);

    btn.onclick = function()
    {
        alert ("Calulate price");
    }
}

addLoadEvent(addRow);
addLoadEvent(addColumn);
addLoadEvent(addButton);

以下是HTML代码：

 <body>
<div id ="container">
    <div id ="header">
        <h1>Electronics</h1>
    </div>
    <div id ="content">
        <h3>Our prices</h3>
        <table id ="pricetable">
            <thead>
            <tr>
                <th>Article</th>
                <th>Type</th>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>23456789</td>
                <td>Phone</td>
                <td>Apple</td>
                <td>6500</td>
                <td><input type ="text" size ="3" value ="1"/></td>
            </tr>
            <tr>
                <td>22256289</td>
                <td>Phone</td>
                <td>Samsung</td>
                <td>6200</td>
                <td><input type ="text" size ="3" value ="1"/></td>
            </tr>
            <tr>
                <td>24444343</td>
                <td>Phone</td>
                <td>MS Lumia</td>
                <td>4200</td>
                <td><input type ="text" size ="3" value ="1"/></td>
            </tr>
            <tr>
                <td>19856639</td>
                <td>Tablet</td>
                <td>LG</td>
                <td>4000</td>
                <td><input type ="text" size ="3" value ="1"/></td>
            </tr>
            <tr>
                <td>39856639</td>
                <td>Tablet</td>
                <td>Dell</td>
                <td>2800</td>
                <td><input type ="text" size ="3" value ="1"/></td>
            </tr>
            <tr>
                <td>12349862</td>
                <td>Tablet</td>
                <td>Apple</td>
                <td>3500</td>
                <td><input type ="text" size ="3" value ="1"/></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>

如何添加一个按钮，使用Javascript从表中进行计算

0 个答案: