我试着这样做,每当我按下提交按钮时,它就会填写我所有的" lorem ipsum"包含来自另一个文件的json数据的条目。我该怎么做才能正常工作?
这是我现在的HTML代码:
bq load --ignore_unknown_values dataset.new_table gs://path/to/file.csv ~/path/to/schema.json
这是我在test_json.json中的json代码:
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="table-basic-1">
<div class="panel-heading">
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
</div>
<h4 class="panel-title">New RTU FZB-1000 - FZB-1000</h4>
</div>
<div class="panel-body">
<table class="table">
<tbody>
<tr>
<td><b>Status</b></td>
<td id="fld_status">Lorem ipsum dolor </td>
</tr>
<tr>
<td><b>Server Update</b></td>
<td id="fld_server_update">Lorem ipsum dolor </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-inverse" data-sortable-id="table-basic-1">
<div class="panel-heading">
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
</div>
<h4 class="panel-title">Remote Terminal Unit</h4>
</div>
<div class="panel-body">
<table class="table">
<tbody>
<tr>
<td><b>Signal Strength</b></td>
<td id="fld_signalstr">Lorem ipsum dolor </td>
</tr>
<tr>
<td><b>Main Power</b></td>
<td id="fld_power">Lorem ipsum dolor </td>
</tr>
<tr>
<td><b>Backup Battery</b></td>
<td id="fld_battery">Lorem ipsum dolor </td>
</tr>
<tr>
<td><b>Ambient Temperature</b></td>
<td id="fld_temp">Lorem ipsum dolor </td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
<div class="col-md-8 col-md-offset-4">
<input id="btn" type="submit" class="btn btn-sm btn-primary m-r-5"></input>
</div>
答案 0 :(得分:1)
考虑到您已经拥有ID
和value
,您就非常接近了!假设您的JSON存储在var a
中,您应该能够使用jQuery使用ID查找元素,并将值替换为文本! (点击提交后)
$("#btn").click(function(){
for (key in a) {
var identifier = key;
var value = a[key];
$("#" + identifier).html(value);
}
})
var a = {
"fld_status": "Online",
"fld_server_update": "Friday, May, 19, 2017 10:33:53 AM Central Daylight Time",
"fld_signalstr": "42%",
"fld_power": "23.98 Volts",
"fld_battery": "7.538 Volts",
"fld_temp": "72 Degrees F",
};
$("#btn").click(function(){
for (key in a) {
var identifier = key;
var value = a[key];
$("#" + identifier).html(value);
}
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-inverse" data-sortable-id="table-basic-1">
<div class="panel-heading">
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
</div>
<h4 class="panel-title">New RTU FZB-1000 - FZB-1000</h4>
</div>
<div class="panel-body">
<table class="table">
<tbody>
<tr>
<td><b>Status</b></td>
<td id="fld_status">Lorem ipsum dolor </td>
</tr>
<tr>
<td><b>Server Update</b></td>
<td id="fld_server_update">Lorem ipsum dolor </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-inverse" data-sortable-id="table-basic-1">
<div class="panel-heading">
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
</div>
<h4 class="panel-title">Remote Terminal Unit</h4>
</div>
<div class="panel-body">
<table class="table">
<tbody>
<tr>
<td><b>Signal Strength</b></td>
<td id="fld_signalstr">Lorem ipsum dolor </td>
</tr>
<tr>
<td><b>Main Power</b></td>
<td id="fld_power">Lorem ipsum dolor </td>
</tr>
<tr>
<td><b>Backup Battery</b></td>
<td id="fld_battery">Lorem ipsum dolor </td>
</tr>
<tr>
<td><b>Ambient Temperature</b></td>
<td id="fld_temp">Lorem ipsum dolor </td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
<div class="col-md-8 col-md-offset-4">
<input id="btn" type="submit" class="btn btn-sm btn-primary m-r-5"></input>
</div>
&#13;