Question

如果你看到这个，请帮忙。我想在点击同一行后预先填充表格字段和行数据。 与此演示相似： http://jsbin.com/qavugo/2/edit?html,js,output

现在面临问题。 fillForm（）函数没问题（在演示中显示在脚本中），以便用行数据填充表单字段。我如何获取行数据？但正如我使用像这样的jsp填充表格

<table class="data-table" id="test" border="1">
    <tr>
        <td>Student ID</td>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Year Level</td>
    </tr>
    <c:foreach items="${allStudents}" var="stud">
        <tr>
            <td>${stud.studentId}</td>
            <td>${stud.firstname}</td>
            <td>${stud.lastname}</td>
            <td>${stud.yearLevel}</td>
        </tr>
    </c:foreach>
</table>

这使我获取rowData 比在

我的表格

<form name="frm" class="data-form" action="./StudentServlet" method="POST" onsubmit="return validateForm()">
    <tr>
        <td>
            <label>Student ID --></label><input type="text" name="studentId" value="${student.studentId}" />
        </td>
        <td>
            <label>First Name --></label><input type="text" name="firstname" value="${student.firstname}" />
        </td>
        <td>
            <label>Last Name --></label>
            <input type="text" name="lastname" value="${student.lastname}" />
        </td>
        <td>
            <label>Year Level --></label><input type="text" name="yearLevel" value="${student.yearLevel}" />
        </td>
    </tr>
</form>

THE SCRIPTS

$(function() {
    // I am not  using dummy data here.
    var rowData = [
        // how and what should go here.Please help
    ];
    row.on("click", function() {
        fillForm(rowData);
    });
    return row;
});

$(".data-table").append(rows);

function fillForm(rowData) {
    var form = $(".data-form");
    form.find("input.value1").val(rowData.value1);
    form.find("input.value2").val(rowData.value2);
    form.find("input.value3").val(rowData.value3);
    form.find("input.value4").val(rowData.value4);
}

我正在更新像这样的记录

     <table>
          <tr>
            <td colspan="5">
                    <input type="submit" name="action" value="Add"  />
                    <input type="submit" name="action" value="Edit" />
                    <input type="submit" name="action" value="Delete" />
                    <input type="submit" name="action" value=Refresh  />
                </td>    
            </tr>       
        </table>

点击/添加/编辑/删除按钮后出现错误

       Warning:   StandardWrapperValve[StudentServlet]: Servlet.service() for servlet    StudentServlet threw exception

         java.lang.NumberFormatException: For input string: "                                                                                                                     "

  at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
   at java.lang.Integer.parseInt(Integer.java:569)
    at java.lang.Integer.parseInt(Integer.java:615)
   at com.joseph.controller.StudentServlet.processRequest(StudentServlet.java:35)
   at com.joseph.controller.StudentServlet.doPost(StudentServlet.java:99)

Answer 1

该演示对于手头的任务看起来太复杂了。真的没有必要使用类引用。您可以通过执行以下操作来简化您的方法：

HTML：

<h1>Student Info:</h1>
<form class="data-form">
    <label>Student ID
        <input type="text" />
    </label>
    <label>First Name
        <input type="text" />
    </label>
    <label>Last Name
        <input type="text" />
    </label>
    <label>Year Level
        <input type="text" />
    </label>
</form>

<table class="data-table" id="test">
    <thead>
    <tr>
        <th>Student ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Year Level</th>
    </tr>
    </thead>
    <tr>
        <td>1</td>
        <td>Frank</td>
        <td>Sinatra</td>
        <td>5</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Miles</td>
        <td>Davis</td>
        <td>4</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Tom</td>
        <td>Waits</td>
        <td>6</td>
    </tr>
</table>

JS：

$(document).ready(function () {
    $("td", this).on("click", function () {
        var tds = $(this).parents("tr").find("td");
        $.each(tds, function (i, v) {
            $($(".data-form input")[i]).val($(v).text());
        });
    });
});

此工作的唯一条件是表单中的输入顺序需要与表中的列顺序匹配。这是一个有效的JSFiddle供参考。

Answer 2

你的表单（数据表单）标签包含你的编辑/删除/更新输入。保持你的表单标签。然后java.lang.NumberFormatException：对于输入字符串：“将不会发生。请参阅如果有效。

我尝试了如上所述进一步添加代码。它运行不正常。我面临同样的困境。任何人都会告诉它哪里出错了？

   <script>
  $(function() 
  row.on("click", function() {
    $('INPUT', this).each(function(i){
     rowData['value' + (i+1)] = this.value;
    });
   fillForm(rowData);
   });

  function fillForm(rowData) {
  var form = $(".data-form");
  form.find("input.value1").val(rowData.value1);
  form.find("input.value2").val(rowData.value2);
  form.find("input.value3").val(rowData.value3);
   form.find("input.value4").val(rowData.value4);
 } 
}
 </script>

Answer 3

尝试将此添加到on.cick函数

    row.on("click", function() {
      $('INPUT', this).each(function(i){
        rowData['value' + (i+1)] = this.value;
      });
      fillForm(rowData);
    });

通过单击行预填充表单字段和行数据

3 个答案:

HTML：

JS：