Question

我有一个带有两列的JSF <h:datatable>。

第1列：<h:outputText>，从bean数据中填充。
coulmn 2：<h:inputText>方框。

表外有一个“Total”字段，我想让它显示实时在column2中输入的字段总数。所以我搜索了一下，发现我需要一个JavaScript才能做到这一点。然而，我对JS很新。

我感到困惑的是如何访问输入文本框的值。到目前为止我做了什么：

function totalFrom() {
    var element = document.getElementById('transferFundsForm:fundsFromTable:0:from_transferAmt');
    if(element != null){
        document.forms['transferFundsForm']['transferFundsForm:totalFrom'].value = document.forms['transferFundsForm']['transferFundsForm:totalFrom'].value+ element;
    }
}

据我了解，transferFundsForm:fundsFromTable:0，此处0代表第一行。如何引用正在编辑的列中的元素？

我在列中的textBox的onblur事件上调用了此函数。

另外我读到我也可以使用<f:ajax>，但我使用的是JSP而不是Facelets，所以我不能使用<f:ajax>。

Answer 1

<table>元素的HTML DOM元素表示具有rows property，它为您提供了所有<tr>元素的数组。此<tr>元素的HTML DOM表示具有cells property，它为您提供了所有<td>元素的数组。

因此，如果表格的第二列只包含一个<input>元素，该元素包含您想要总结的值，并且totalFrom是<input>元素（至少，你试图设置value属性而不是innerHTML），你可以按如下方式实现：

function totalFrom() {
    var table = document.getElementById('transferFundsForm:fundsFromTable');
    var total = 0;

    for (var i = 0; i < table.rows.length; i++) {
        var secondColumn = table.rows[i].cells[1];
        var input = secondColumn.getElementsByTagName('input')[0];
        var value = parseInt(input.value);

        if (!isNaN(value)) {
            total += value;
        }
    }

    document.getElementById('transferFundsForm:totalFrom').value = total;
}

如果totalFrom不是<h:outputText id="totalFrom">，请将其设置如下：

    document.getElementById('transferFundsForm:totalFrom').innerHTML = total;

Answer 2

为什么不使用jsf服务器端事件或用户 http://livedemo.exadel.com/richfaces-demo/ 它还为您提供内置的ajax功能

计算jsf中数据表中输入文本字段的总数

2 个答案: