Question

我使用javascript如下代码：

function addARow() {
var cell;
var table = document.getElementById("x:dl");
var rowObj = table.tBodies[0].lastChild.cloneNode(true);
table.tBodies[0].appendChild(rowObj);
rowObj.cells[0].getElementsByTagName("INPUT")[0].id = "x:dl:" + (table.rows.length - 2) + ":firstName";
rowObj.cells[0].getElementsByTagName("INPUT")[0].name = rowObj.cells[0].getElementsByTagName("INPUT")[0].id;
rowObj.cells[1].getElementsByTagName("INPUT")[0].id = "x:dl:" + (table.rows.length - 2) + ":lastName";
rowObj.cells[1].getElementsByTagName("INPUT")[0].name = rowObj.cells[1].getElementsByTagName("INPUT")[0].id;
return false;
}

这是xHTML页面：

<h:form id="x">
<t:dataTable id="dl" border="1" value="#{dynamicInputFieldController.nameList}" var="obj">
<h:column>
<f:facet name="header">
<h:outputText value="First Name" />
</f:facet>
<h:inputText id="firstName" value="#{obj.firstName}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Last Name" />
</f:facet>
<h:inputText id="lastName" value="#{obj.lastName}" />
</h:column>
</t:dataTable><br />

<h:commandButton value="Add A Row" onclick="addARow();return false" />

我想要的是在客户端修改数据表（添加，删除，编辑行数据），然后将最终数据提交给服务器。

当我点击Add按钮时，克隆了最后一行。但是，当我提交表格时。刚刚添加的行未提交。但是可以更新当前行的值。

JSF 1.2可以吗？

这是呈现的HTML

<table id="x:dl" border="1">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody id="x:dl:tbody_element">
    <tr>
      <td>
        <input name="x:dl:0:firstName" id="x:dl:0:firstName" type="text" value="AAAA" />
      </td>
      <td>
        <input name="x:dl:0:lastName" id="x:dl:0:lastName" type="text" value="CCCC" />
      </td>
    </tr>
    <tr>
      <td>
        <input name="x:dl:0:firstName" id="x:dl:1:firstName" submitName="x:dl:1:firstName" type="text" value="AAAA" />
      </td>
      <td>
        <input name="x:dl:0:lastName" id="x:dl:1:lastName" submitName="x:dl:1:lastName" type="text" value="CCCC" />
      </td>
    </tr>
    <tr>
      <td>
        <input name="x:dl:0:firstName" id="x:dl:2:firstName" submitName="x:dl:2:firstName" type="text" value="AAAA" />
      </td>
      <td>
        <input name="x:dl:0:lastName" id="x:dl:2:lastName" submitName="x:dl:2:lastName" type="text" value="CCCC" />
      </td>
    </tr>
  </tbody>
</table>

第2行和第3行是由上面的javascript生成的。

JSF 1.2 - 使用JavaScript </t：datatable>将新行插入<t：datatable>

0 个答案: