JSF 1.2-将新行插入<；t:dataTable>；通过使用JavaScript

我使用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" />

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

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

JSF1.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>

名字
姓

---

第二行和第三行是由上面的javascript生成的。

您在客户端得到的HTML是什么？我已经在我的问题中更新了。请注意，第2行和第3行是由上述javascript生成的。