我指的是链接中发现的问题 Pre-populate form fields from the html table's row on which it is clicked.(all this is supposed to happen on jsp)
其中的 json 是内联的:
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"
}
];
我想要的是将这个 json 设为外部并通过 ajax 和 jquery 链接它。
我正在使用的代码:
HTML
<div class="container">
<!-- start of row -->
<div class="row">
<div class="col-sm-8">
<br />
<center><span class="tbltxt">LISTE DES TARIFS EXISTANTE</span></center>
<br />
<div class="table-responsive">
<table class="table tg" style="table-layout: fixed; width: 745px">
<colgroup>
<col style="width: 249px">
<col style="width: 249px">
<col style="width: 249px">
</colgroup>
<thead>
<tr>
<th class="tg-s6z2 bdleft">NOM</th>
<th class="tg-s6z2">CODE</th>
<th class="tg-s6z2">PRIX PAR DEFAUT</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr>
<td colspan="5">
<div class="scrollit">
<table class="table tg" style="table-layout: fixed;">
<colgroup>
<col style="width: 240px">
<col style="width: 240px">
<col style="width: 240px">
</colgroup>
<c:forEach items="${type_tarif_list}" var="type_tarif" varStatus="loop">
<tr id="tb2">
<td class="tg-s6z2 bdleft">${type_tarif.libelle}</td>
<td class="tg-s6z2">${type_tarif.code}</td>
<td class="tg-s6z2 bdryt">${type_tarif.montantTarifDefaut}</td>
</tr>
</c:forEach>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-4" style="background-color: #f7f7f7; height: 800px;">
<div>
<center>
<form class="form-horizontal" style="padding-top: 57px;">
<div class="form-group">
<label for="inputName" class="control-label col-xs-2">NOM:</label>
<div class="col-xs-10">
<input type="text" class="form-control styletxtbox value1" id="inputName" style="width: 211px !important;">
</div>
</div>
<div class="form-group">
<label for="inputCode" class="control-label col-xs-2">CODE:</label>
<div class="col-xs-10">
<input type="text" class="form-control styletxtbox value2" id="inputCode" style="width: 211px !important;">
</div>
</div>
<hr class="style-two">
<center>
<div class="form-group">
<label for="inputTarif" class="control-label col-xs-2">Tarif par défaut:</label>
<div class="col-xs-10">
<input type="text" class="form-control styletxtbox value3" id="inputTarif" style="width: 211px !important;">
</div>
</div>
</center>
</form>
</center>
<hr class="style-two">
<div id="scrollit">
<form class="form-horizontal" style="margin: 0 auto; width: 115px;">
<div class="checkbox1">
<label>
<input type="checkbox" name="service" value="petitdejeuner" class="styled">Petit Déjeuner
</label>
</div>
<div class="checkbox1">
<label>
<input type="checkbox" name="service" value="parking" class="styled">Parking
</label>
</div>
<div class="checkbox1">
<label>
<input type="checkbox" name="service" value="Piscine" class="styled">Piscine
</label>
</div>
<div class="checkbox1">
<label>
<input type="checkbox" name="service" value="Bar" class="styled">Bar
</label>
</div>
<div class="checkbox1">
<label>
<input type="checkbox" name="service" value="Climatisation" class="styled">Climatisation
</label>
</div>
<div class="checkbox1">
<label>
<input type="checkbox" name="service" value="petitdejeuner" class="styled">Petit Déjeuner
</label>
</div>
<div class="checkbox1">
<label>
<input type="checkbox" name="service" value="parking" class="styled">Parking
</label>
</div>
<div class="checkbox1">
<label>
<input type="checkbox" name="service" value="Piscine" class="styled">Piscine
</label>
</div>
<div class="checkbox1">
<label>
<input type="checkbox" name="service" value="Bar" class="styled">Bar
</label>
</div>
<div class="checkbox1">
<label>
<input type="checkbox" name="service" value="Climatisation" class="styled">Climatisation
</label>
</div>
</form>
</div>
</div>
<br /><br />
<div>
<center>
<p>
<button type="button" class="btn btn-default btn-sm">Annuler</button>
<button type="button" class="btn btn-default btn-sm">Valider</button>
</p>
</center>
</div>
</div>
</div>
<!-- end of row -->
<!-- start of row -->
<div class="row">
</div>
<!-- end of row -->
</div>
<!-- end of page content -->
<!-- jQuery -->
<script type="text/javascript" src="js/default.js"></script>
<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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
JS
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
/* global tableData */
$(function() {
$.ajax({
url: 'json/pricesinputjson.json', // path to file
dataType: 'text', // type of file (text, json, xml, etc)
success: function(data) { // callback for successful completion
var json = $.parseJSON(data);
$(data).html(tableData);
},
error: function (xhr, status, error) {
alert("Error:" + status + ':' + error + ':' + xhr.responseText);
}
});
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.on("click", function() {
fillForm(rowData);
});
return row;
});
$(".table").append(rows);
function fillForm(rowData) {
var form = $(".form-horizontal");
form.find("input.value1").val(rowData.value1);
form.find("input.value2").val(rowData.value2);
form.find("input.value3").val(rowData.value3);
}
});
JSON
[
{
"value1": "Suite",
"value2": "0001",
"value3": "150.00"
}
,
{
"value1": "Tarif Public",
"value2": "0002",
"value3": "500.00"
}
]
所以基本上，我需要做的是，当我单击表格的表格行时，数据应该填充在表单字段中。
现在表中显示的数据将来自一个 json 文件，该文件应该是外部的而不是内部的。
我主要需要 js 部分的帮助。
最佳答案
您几乎拥有了所有内容，页面加载后，var json = $.parseJSON(data); 就会填充您的 json 数据。
从那里您只需迭代 json 并绑定(bind)数据。
$.ajax({
url: 'json/pricesinputjson.json', // path to file
dataType: 'text', // type of file (text, json, xml, etc)
success: function(data) { // callback for successful completion
var json = $.parseJSON(data);
var table = $(".table");
for(var i = 0; i < json.length; ++i) {
// here you bind data
}
},
error: function (xhr, status, error) {
alert("Error:" + status + ':' + error + ':' + xhr.responseText);
}
});
此外，我不确定表格中的哪个单元格应该映射到某些内容，我让您提供更清晰的信息(仅将 html 清理到相关部分)或从此示例进行绑定(bind)。
关于javascript - 从单击的 html 表格行中预填充表单字段，并从 json 文件接收表格数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31021228/