Fatal编程技术网
  • javascript/
  • Javascript 对动态表中的单元格求和

Javascript 对动态表中的单元格求和

javascript

Javascript 对动态表中的单元格求和,javascript,html-table,add,Javascript,Html Table,Add,我已经使用javascript设置了一个表。请注意，为了方便起见，我将行数减少到了一行。加载后，用户将在单元格中输入值。每行有3个单元格。在cell1或cell2中键入值时，cell3应自动更新。公式是 第1单元（在第1列中）+第2单元（在第2列中）=第3单元（在第3列中： 总数） 然而，这是行不通的。我一直在3号牢房里听到NaN。有人能帮我吗 <!DOCTYPE html> <html> <head> <title>MP</title>

我已经使用javascript设置了一个
表
。请注意，为了方便起见，我将行数减少到了一行。加载后，用户将在单元格中输入值。每行有3个单元格。在cell1或cell2中键入值时，cell3应自动更新。公式是

第1单元（在第1列中）+第2单元（在第2列中）=第3单元（在第3列中： 总数）

然而，这是行不通的。我一直在3号牢房里听到NaN。有人能帮我吗

<!DOCTYPE html>
<html>
<head>
<title>MP</title>

<style type="text/css">
th {font-weight: bold; text-align: left; font-size: 14px; border: 1px; 
border-style: solid; margin: 0px; border-colapse: colapse; 
border-spacing: 0px;}
td {font-weight: Normal; font-size: 14px; border: 1px; border-style: solid; 
margin: 0px; border-colapse: colapse;}
.sn {text-align: right;}
.fin {text-align: right;}

</style>

</head>
<body>

<table id="pr">
<tbody>
<tr class="thd">
<th>Score A</th>
<th>Score B</th>
<th>Total</th>
</tr>

<tr>
<td><input type="text" class="fin" onkeyup="update();" /></td>
<td><input type="text" class="fin" onkeyup="update();" /></td>
<td input type="text" class="fin" name="totdeduction"></td>
</tr>

</tbody>
</table>
<br />
<br />

<script>
function update() {
var j = document.getElementById("pr").rows[1].cells[0].innerHTML;
var k = parseInt(j);
var l = document.getElementById("pr").rows[1].cells[1].innerHTML;
var m = parseInt(l);
var n = (k + m);

if (j ="") {k = 0;}
else if (l ="") {m = 0;}
document.getElementById("pr").rows[1].cells[2].innerHTML = n;
}
</script>
</body>
</html>


议员
{字体大小：粗体；文本对齐：左侧；字体大小：14px；边框：1px；
边框样式：实体；边距：0px；边框后凸面：后凸面；
边框间距：0px；}
td{字体大小：普通；字体大小：14px；边框：1px；边框样式：纯色；
边距：0px；边框间距：间距；}
.sn{文本对齐：右；}
.fin{text align:right；}
得分
B分
全部的




函数更新（）{
var j=document.getElementById（“pr”）.rows[1]。cells[0]。innerHTML；
var k=parseInt（j）；
var l=document.getElementById（“pr”）.rows[1]。cells[1]。innerHTML；
var m=parseInt（l）；
var n=（k+m）；
如果（j=”“）{k=0；}
如果（l=”“）{m=0；}
document.getElementById（“pr”）.rows[1]。cells[2]。innerHTML=n；
}
首先，您的订购稍有错误。看看下面。 此外，我们现在需要确保这适用于任何行，而不是将其绑定到具有
索引的特定行，因此我们将
this
关键字传递到函数中，以便我们可以引用父行，从而无论是哪一行，都可以引用它的子行

因此，您的HTML将如下所示


<table id="pr">
    <tbody>
        <tr class="thd">
            <th>Score A</th>
            <th>Score B</th>
            <th>Total</th>
        </tr>
        <tr>
            <td>
                <input type="text" class="fin" onkeyup="update(this);" />
            </td>
            <td>
                <input type="text" class="fin" onkeyup="update(this);" />
            </td>
            <td>
                <input type="text" class="fin" name="totdeduction" />
            </td>
        </tr>
    </tbody>
</table>


其中包含一个函数，用于确保文本不会影响公式


演示：
尝试在此处检查已修复的脚本：


假设
var j
包含number，但
j=document.getElementById（“pr”）.rows[1]。cells[0]。innerHTML
分配给表单元格包含的输入的DOM对象。相反，您应该为输入赋值：
j=document.getElementById（“pr”）.rows[1]。cells[0]。getElementsByTagName（“input”）[0]。value
由于您有许多行要执行相同的操作，因此您需要执行的操作与只有一行时略有不同

最简单的方法可能是只要在触发keyup事件时循环表中的所有行，并更新每一行。显然，这是低效的——想象一下有1000000行！一次击键将导致所有1000000次重新计算：周：

另一种方法是使用一个函数来计算任意一行的结果。然后，您可以在任何时候发生keyup事件时调用此函数，但在这种情况下，一次只能计算一行。这种方法显然优于前者，但其代价是使用更先进的技术。也就是说，使用
.addEventListener
函数和内联javascript的bucket加载，或者理解
这个
关键字。我个人喜欢.addEventListener/this关键字组合

首先，这里有一个函数，它将替换您已有的函数-这将计算每行中第三个单元格的无限行数


function update()
{
    var tableElem = document.getElementById('pr');
    var rowElems = tableElem.getElementsByTagName('tr');
    var i, nRows;

    nRows = rowElems.length;
    for (i=1; i<nRows; i++)     // start at 1, since the first row (index 0) contains the table's header
    {
        var curRowInputs = rowElems[i].getElementsByTagName('input');

        var firstVal = parseInt(curRowInputs[0].value);
        var secondVal = parseInt(curRowInputs[1].value);

        if (isNaN(firstVal) == true)
            firstVal = 0;

        if (isNaN(secondVal) == true)
            secondVal = 0;

        var result = firstVal + secondVal;
        curRowInputs[2].value = result;
    }
}


接下来，我们需要一个函数来初始化所有事件处理程序


function addTableEventHandlers()
{
    var tableElem = document.getElementById('pr');
    var rowElems = tableElem.getElementsByTagName('tr');
    var i, nRows;

    nRows = rowElems.length;
    for (i=1; i<nRows; i++)     // start at 1, since the first row (index 0) contains the table's header
    {
        var curRowInputs = rowElems[i].getElementsByTagName('input');
        curRowInputs[0].addEventListener('keyup', myOnKeyupFunc, false);
        curRowInputs[1].addEventListener('keyup', myOnKeyupFunc, false);
    }
}


最后，我们需要一种方法来调用将初始化表的函数。最好是在我们知道文档已经完成加载，并且所有必需的元素都将存在并被解析之后。一个很好的例子是
窗口
对象的
onload
事件

这将导致在发生这种情况时调用函数：


window.addEventListener('load', onDocLoaded, false);


然后，在稍后将定义的onDocLoaded函数中，我们只需调用
addTableEventHandlers


function onDocLoaded(evt)
{
    addTableEventHandlers();
}


呸！希望你还和我在一起。将其结合在一起，我们最终得到以下完整代码：


<!DOCTYPE html>
<html>
<head>
<title>MP</title>
<script>
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
    addTableEventHandlers();
}

function addTableEventHandlers()
{
    var tableElem = document.getElementById('pr');
    var rowElems = tableElem.getElementsByTagName('tr');
    var i, nRows;

    nRows = rowElems.length;
    for (i=1; i<nRows; i++)     // start at 1, since the first row (index 0) contains the table's header
    {
        var curRowInputs = rowElems[i].getElementsByTagName('input');
        curRowInputs[0].addEventListener('keyup', myOnKeyupFunc, false);
        curRowInputs[1].addEventListener('keyup', myOnKeyupFunc, false);
    }
}

function myOnKeyupFunc(evt)
{
    var inputThatFiredTheEvent = this;
    var containingCell = inputThatFiredTheEvent.parentNode;
    var containingRow = containingCell.parentNode;
    var inputsInRow = containingRow.getElementsByTagName('input');

    var firstVal = parseInt(inputsInRow[0].value);
    var secondVal = parseInt(inputsInRow[1].value);

    if (isNaN(firstVal) == true)
        firstVal = 0;

    if (isNaN(secondVal) == true)
        secondVal = 0;

    var result = firstVal + secondVal;
    inputsInRow[2].value = result;  
}
</script>

<style type="text/css">
th {font-weight: bold; text-align: left; font-size: 14px; border: 1px; 
border-style: solid; margin: 0px; border-colapse: colapse; 
border-spacing: 0px;}
td {font-weight: Normal; font-size: 14px; border: 1px; border-style: solid; 
margin: 0px; border-colapse: colapse;}
.sn {text-align: right;}
.fin {text-align: right;}
</style>
</head>
<body>
<table id="pr">
    <tbody>
        <tr class="thd">
            <th>Score A</th>
            <th>Score B</th>
            <th>Total</th>
        </tr>
        <tr>
            <td><input type='text' class='fin'/></td>
            <td><input type='text' class='fin'/></td>
            <td><input type='text' class='fin' readonly /></td>
        </tr>
        <tr>
            <td><input type='text' class='fin'/></td>
            <td><input type='text' class='fin'/></td>
            <td><input type='text' class='fin' readonly /></td>
        </tr>
    </tbody>
</table>
<br/>
<br/>
</body>
</html>




议员
window.addEventListener（'load'，onDocLoaded，false）；
函数onDocLoaded（evt）
{
addTableEventHandlers（）；
}
函数addTableEventHandlers（）
{
var tableElem=document.getElementById（'pr'）；
var rowElems=tablelelem.getElementsByTagName（'tr'）；
var i，nRows；
nRows=rowlems.长度；

对于（i=1；我做得很好。谢谢你让我的一天过得很好。我非常感谢你为我多做了一点事……因为你今天对我微笑了&下一次非常欢迎。听起来对我来说是双赢的！谢谢你的反馈，非常感谢。：）如果Rob的答案能解决你的问题，别忘了正式接受它。：）

function myOnKeyupFunc(evt)
{
    var inputThatFiredTheEvent = this;
    var containingCell = inputThatFiredTheEvent.parentNode;
    var containingRow = containingCell.parentNode;
    var inputsInRow = containingRow.getElementsByTagName('input');

    var firstVal = parseInt(inputsInRow[0].value);
    var secondVal = parseInt(inputsInRow[1].value);

    if (isNaN(firstVal) == true)
        firstVal = 0;

    if (isNaN(secondVal) == true)
        secondVal = 0;

    var result = firstVal + secondVal;
    inputsInRow[2].value = result;  
}



window.addEventListener('load', onDocLoaded, false);



function onDocLoaded(evt)
{
    addTableEventHandlers();
}



<!DOCTYPE html>
<html>
<head>
<title>MP</title>
<script>
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
    addTableEventHandlers();
}

function addTableEventHandlers()
{
    var tableElem = document.getElementById('pr');
    var rowElems = tableElem.getElementsByTagName('tr');
    var i, nRows;

    nRows = rowElems.length;
    for (i=1; i<nRows; i++)     // start at 1, since the first row (index 0) contains the table's header
    {
        var curRowInputs = rowElems[i].getElementsByTagName('input');
        curRowInputs[0].addEventListener('keyup', myOnKeyupFunc, false);
        curRowInputs[1].addEventListener('keyup', myOnKeyupFunc, false);
    }
}

function myOnKeyupFunc(evt)
{
    var inputThatFiredTheEvent = this;
    var containingCell = inputThatFiredTheEvent.parentNode;
    var containingRow = containingCell.parentNode;
    var inputsInRow = containingRow.getElementsByTagName('input');

    var firstVal = parseInt(inputsInRow[0].value);
    var secondVal = parseInt(inputsInRow[1].value);

    if (isNaN(firstVal) == true)
        firstVal = 0;

    if (isNaN(secondVal) == true)
        secondVal = 0;

    var result = firstVal + secondVal;
    inputsInRow[2].value = result;  
}
</script>

<style type="text/css">
th {font-weight: bold; text-align: left; font-size: 14px; border: 1px; 
border-style: solid; margin: 0px; border-colapse: colapse; 
border-spacing: 0px;}
td {font-weight: Normal; font-size: 14px; border: 1px; border-style: solid; 
margin: 0px; border-colapse: colapse;}
.sn {text-align: right;}
.fin {text-align: right;}
</style>
</head>
<body>
<table id="pr">
    <tbody>
        <tr class="thd">
            <th>Score A</th>
            <th>Score B</th>
            <th>Total</th>
        </tr>
        <tr>
            <td><input type='text' class='fin'/></td>
            <td><input type='text' class='fin'/></td>
            <td><input type='text' class='fin' readonly /></td>
        </tr>
        <tr>
            <td><input type='text' class='fin'/></td>
            <td><input type='text' class='fin'/></td>
            <td><input type='text' class='fin' readonly /></td>
        </tr>
    </tbody>
</table>
<br/>
<br/>
</body>
</html>