从单击表单的 html 表行中预填充表单字段.(所有这些都应该发生在JSP上）

Pre-populate form fields from the html table's row on which it is clicked.(all this is supposed to happen on jsp)

本文关键字：表单 JSP 所有这些 字段 html 单击 填充      更新时间：2023-09-26

我正在尝试使用jquery或javascript来填充表单字段，其中包含通过单击行选择的行元素。我尝试了在堆栈溢出上找到的类似问题的解决方案。我是新手，请耐心等待。（http://jsbin.com/rotuni/2/edit）。但我尝试了很多次。它没有按预期工作。

 //html part containing the form fields which is to be pre-populated.
 <body>
<form class="data-form">
<label>Value1<input class="value1" /></label>
<label>Value2<input class="value2" /></label>
<label>Value3<input class="value3" /></label>
<label>Value4<input class="value4" /></label>
</form>
  <table class="data-table" >
    <thead>
        <tr>
            <th>value1</th>
            <th>value2</th>
            <th>value3</th>
            <th>value4</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    </table>
 </body>

JS部分

$(function() {
  var tableData = [
    {
      value1: "row1-v1",
      value2: "row1-v2",
      value3: "row1-v3",
      value4: "row1-v4"
    }, {
      value1: "row2-v1",
      value2: "row2-v2",
      value3: "row2-v3",
      value4: "row2-v4"
    }
  ];
  var rows = $.map(tableData, function(rowData) {
    var row = $("<tr></tr>");
    row.append($('<td class="class1"></td>').html(rowData.value1));
    row.append($('<td class="class2"></td>').html(rowData.value2));
    row.append($('<td class="class3"></td>').html(rowData.value3));
    row.append($('<td class="class4"></td>').html(rowData.value4));
    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);
  }
});

总是将它们用于js和ui部分。

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

似乎您缺少使用 jquery 的导入脚本。您必须导入 jquery.min.js 才能使用 jquery 函数。导入以下脚本，它将起作用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
相关文章：