gpt4 book ai didi

javascript - 从单击它的 html 表的行中预填充表单字段。(所有这些都应该在 jsp 上发生)

转载 作者:行者123 更新时间:2023-11-29 21:54:05 24 4
gpt4 key购买 nike

我正在尝试使用 jquery 或 javascript 来使用通过单击行选择的行元素填充表单字段。我尝试了在 stackoverflow 上找到的解决方案来解决类似的问题。我是新手,请耐心等待。( 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" />

关于javascript - 从单击它的 html 表的行中预填充表单字段。(所有这些都应该在 jsp 上发生),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27418140/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com