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

Question

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

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

表外有一个“总计”字段，我想让它实时显示在 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 代表第一行。如何引用正在编辑的列中的元素？

我已经在列中文本框的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 功能