【问题标题】:Clicking on the html table row's Edit link to populate EditDATA_form field. The tables data are being populated by servlet response to jsp单击 html 表行的编辑链接以填充 EditDATA_form 字段。表数据由对 jsp 的 servlet 响应填充
【发布时间】:2015-02-11 23:48:09
【问题描述】:

我想用这样填充的表格行数据填充表单字段

  <table  class="data-table" 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>
                <td><a href='javascript:void(0);' class='edit_doc'>Edit</a></td>
            </tr>
        </c:forEach>
            </table>

现在我想编写 Jquery(这对我来说是全新的)。我经历了很多例子,问过同样的问题。但是 jquery 对我不起作用。谁能告诉我在脚本标签中写什么?如果可能的话,也请分享代码。

//表单上的jsp

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

//脚本

//what goes here

【问题讨论】:

  • 你想用 jquery 做什么?
  • 我想通过单击编辑链接,使用 html 表格行中的数据预填充表单字段。
  • 我必须定义一个javascript函数。

标签: java javascript jquery jsp servlets


【解决方案1】:

目的所需的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());
    });
});
});

此外,您的表单恰好位于表格标记中。将其从表格标记中取出。唯一保留在表格标记中的是您的表格。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-08-21
    • 1970-01-01
    • 2015-02-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-10-15
    相关资源
    最近更新 更多