我已经构建了这个应用程序，允许用户输入一个股票代码符号，它显示有关股票的价格信息。但现在我希望能够同时查找多个符号（用逗号分隔）并在页面上以类似表格的格式显示每个符号的价格。我怎么能用javascript做到这一点？我建立的应用程序的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stocks</title>
<!-- Bootstrap core CSS -->
<link href="https://bootswatch.com/4/simplex/bootstrap.min.css" rel="stylesheet">
<style>
#stock {
display: flex;
background:#f4f4f4;
padding:10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="searchContainer">
<h1>Enter symbol</h1>
<p class="lead">Enter a a symbol to fetch a price </p>
<input type="text" id ="search" class="form-control" placeholder="Stock symbol...">
</div>
<br>
<button type="button" id="searchstock" class="btn btn-info">Get Stock Price</button>
<br>
<br>
<div id="stock"></div>
</div>
<!-- /.container -->
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
<script>
$(document).ready(function(){
$('#searchstock').on('click', function(){
let requestData = $('#search').val();
let resultElement = $('#stock');
// Make request to rest API
$.ajax({
url:'https://www.alphavantage.co/query?function=BATCH_STOCK_QUOTES&symbols=' + requestData + '&apikey=SB1CZMKQ6Q5283QZ',
method: 'get',
data:{symbols:requestData},
dataType: 'json',
success: function (data){
console.log(data);
resultElement.html( data["Stock Quotes"][0]["1. symbol"] + '<hr>'
+ ' Price : ' + data["Stock Quotes"][0]["2. price"])
// resultElement.html('Price : ' + data["Stock Quotes"][0]["2. price"])
}
});
});
});
</script>
我会改变
$('#searchstock').on('click', function(){
至
$('#search').on('keyup', function() {
并在成功函数中添加一个循环，它将符号，价格和timeStamps连接为表格行和单元格
var table;
for (let i = 0; i < data['Stock Quotes'].length; i++) {
let symbol = '<td>' + data['Stock Quotes'][i]['1. symbol'] + '</td>';
let price = '<td>' + data['Stock Quotes'][i]['2. price'] + '</td>';
let timeStamp = '<td>' + data['Stock Quotes'][i]['4. timestamp'] + '</td>';
table += '<tr>' + symbol + price + timeStamp + '</tr>';
}
document.getElementById('stockList').innerHTML = table;
当然，您还需要在HTML中添加表格
<table id="stockList"></table>
输出将是：
A 67.5000 2018-03-02 15:59:58 B 60.0450 2018-03-02 15:54:37 C 73.6850 2018-03-02 15:59:58