javascript - 添加功能无效

Question

我在下面编写了 javascript，它允许用户添加和删除行并计算权重。添加和删​​除工作正常，但我相信我无法进行加权总和。你能给我建议吗？

function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name="chkbox[]";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.name = "txtbox[]";
    cell2.appendChild(element2);

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");
    element3.type = "text";
    element3.name = "txtbox[]";
    cell3.appendChild(element3);

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.name = "txtbox[]";
    element4.class = "wtotal1";
    cell4.appendChild(element4);
}

function deleteRow(tableID) {
    try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
    }catch(e) {
        alert(e);
    }
}

function weighttotal1(){
        var tweight1 = 0;
        var cusid_ele = document.getElementsByClassName('wtotal1');
        for (var i = 0; i < cusid_ele.length; ++i) {
          if (!isNaN(parseFloat(cusid_ele[i].textContent)) )
            tweight1 += parseFloat(cusid_ele[i].textContent);  
        }
        document.getElementById('tweight1').value=tweight1;
        }


<table id="dataTable1" class="table table-condensed table-hover table-responsive table-striped table-bordered">
    <tbody>
        <tr>
            <th></th>
            <th>ComponentId</th>
            <th>Component Description</th>
            <th>Weighting</th>
        </tr>
     </tbody>
</table>
<br>
<div class="col-sm-6">
    <div class="form-inline">
        <input class="form-control input-sm" name="tweight" type="text" id="tweight1"  value="" readonly>
        <button onclick="weighttotal1()">Weigthing total</button>
    </div>
</div>

Answer 1

两件事: 1.- 替换属性 element4.class = "wtotal1"; 通过 element4.className = "wtotal1"; 2 将 cusid_ele[i].textContent 属性替换为 cusid_ele[i].value

完整代码

<script>
function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name="chkbox[]";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.name = "txtbox[]";
    cell2.appendChild(element2);

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");
    element3.type = "text";
    element3.name = "txtbox[]";
    cell3.appendChild(element3);

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.name = "txtbox[]";
    element4.className = "wtotal1";
    cell4.appendChild(element4);
}

function deleteRow(tableID) {
    try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
    }catch(e) {
        alert(e);
    }
}

function weighttotal1(){
        var tweight1 = 0;
        var cusid_ele = document.getElementsByClassName('wtotal1');

        for (var i = 0; i < cusid_ele.length; ++i) {
          if (!isNaN(parseFloat(cusid_ele[i].value)) )
            tweight1 += parseFloat(cusid_ele[i].value); 

        }
        document.getElementById('tweight1').value=tweight1;
        }

</script>
<table id="dataTable1" class="table table-condensed table-hover table-responsive table-striped table-bordered">
<tbody>
<tr>
<th></th>
<th>ComponentId</th>
<th>Component Description</th>
<th>Weighting</th>
</tr>
</tbody>
</table>
<br>
<div class="col-sm-6">
<div class="form-inline">
<button onclick="addRow('dataTable1')">Add Row</button><button 
onclick="deleteRow('dataTable1')">Delete Row</button>
<br>
<br>
<input class="form-control input-sm" name="tweight" type="text" id="tweight1"  value="" readonly>

<button onclick="weighttotal1()">Weigthing total</button>

</div>
</div>