无法使用JavaScript在HTML表中放置带有事件侦听器的按钮
我正在创建一个航班预订系统。一旦用户根据某些条件查询航班，我需要在表中显示从服务器返回的数据，每行上都有一个“立即预订”按钮，以预订特定航班 我正在使用JavaScript填充表。我的问题是，我无法使用自定义onclick动态生成按钮。在onclick中，我想用多个参数调用函数。但不知何故，我的代码不起作用 这是添加到表中的JavaScript字符串，用于生成带有自定义按钮的表单元格-无法使用JavaScript在HTML表中放置带有事件侦听器的按钮,javascript,jquery,html,twitter-bootstrap,dom,Javascript,Jquery,Html,Twitter Bootstrap,Dom,我正在创建一个航班预订系统。一旦用户根据某些条件查询航班，我需要在表中显示从服务器返回的数据，每行上都有一个“立即预订”按钮，以预订特定航班 我正在使用JavaScript填充表。我的问题是，我无法使用自定义onclick动态生成按钮。在onclick中，我想用多个参数调用函数。但不知何故，我的代码不起作用 这是添加到表中的JavaScript字符串，用于生成带有自定义按钮的表单元格- "<td><button id = 'bookButton' onclick=bookFli
"<td><button id = 'bookButton' onclick=bookFlight('" + data['flight_no'] + "', '" + data['departure_destination'] + "', '" + data["arrival_destination"] + "', '" + data["seat_class"] + "', '" + data['departure_details'] + "') value='Book Now'></button></td>"
“”
<td>JT216</td><td>Singapore</td><td>Bangkok</td><td>2013-12-01 18:00:00</td><td>2013-12-01 19:30:00</td><td>JetStar Air</td><td>B787</td><td>$100</td><td><button id = 'bookButton' onclick=bookFlight('JT216', 'Singapore', 'Bangkok', 'Economy', '2013-12-01 18:00:00') value='Book Now'></button></td>
JT216SingaporeBangkok2013-12-01 18:00:002013-12-01 19:30:00JetStar AirB787$100
<button id="bookButton" onclick="bookFlight('JT216'," 'singapore',="" 'bangkok',="" 'economy',="" '2013-12-01="" 18:00:00')="" value="Book Now"></button>
<html>
<head>
<title>
Flight Reservation System
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class = "container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-fields">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Fly<em>Smart</em></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-fields">
<ul class="nav navbar-nav navbar-right">
<li><a href="/flightSearchPage.php">Search For Flights</a></li>
<li><a href="/flightSearchPage.php">Manage Booking</a></li>
<li><a href="/flightSearchPage.php">Admin Log In</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div id = "outerContainer">
<div id = "innerContainer" class = "row-fluid">
<form id = "searchForm" class = "text-center searchPos">
<fieldset>
<br/>
<div class = "row-fluid">
<label>Departure City: </label>
<select id = "depCities" name = "fromCity"></select>
<label> Arrival City: </label>
<select id = "arrCities" name = "toCity"></select>
<label>Seat Class: </label>
<select id = "seatClass" name = "class">
</select>
<label>Date of Departure:</label>
<input name = "departureDate" id = "depDate" type = "date"></input>
<strong>1</strong><input name = "numPeople" id = "numPeople" type = "range"
min = "1" max = "150" default = "1" onchange = "updateRangeValue();"></input><strong>150</strong>
<br/><strong>Selected Seats: <output id="numSelected"> </output></strong>
<br/><br/>
<input class = "btn btn-primary" type = "submit" value = "Search for Flights"></input>
</div>
</fieldset>
</form>
<br/>
<table id = "resultsTable" class = "table">
</table>
<br/>
<br/>
<p id = "Log"></p>
</div>
</div>
<script type="text/javascript">
$("#resultsTable thead").remove();
$("#resultsTable tbody").remove();
$("#resultsTable").append("<thead><tr>" + printTableHead() +"</tr></thead><tbody>");
tableData = [{0: "JT216", 1: "JetStar Air", 2: "Singapore",
3: "Bangkok",
4: "2013-12-01 18:00:00",
5: "2013-12-01 19:30:00",
6: "80",
7: "B787",
8: "Economy",
9: "80",
10: "100",
11: "JT216",
12: "2013-12-01 18:00:00",
arrival_destination: "Bangkok",
arrival_details: "2013-12-01 19:30:00",
available_seats: "80",
capacity: "80",
carrier_name: "JetStar Air",
departure_destination: "Singapore",
departure_details: "2013-12-01 18:00:00",
flight_no: "JT216",
plane_model_no: "B787",
price: "100",
seat_class: "Economy"}];
$.each(tableData, function() {
$("#resultsTable").append("<tr>" + printTupleData(this) +"</tr>");
console.log("<tr>" + printTupleData(this) +"</tr>");
});
$("#resultsTable").append("</tbody");
$("#resultsTable").append("</tbody");
function printTableHead() {
tuple = "";
tuple += ("<th>Flight Number</th>");
tuple += ("<th>From</th>");
tuple += ("<th>To</th>");
tuple += ("<th>Departure Date/Time</th>");
tuple += ("<th>Arrival Date/Time</th>");
tuple += ("<th>Airline</th>");
tuple += ("<th>Aircraft Model</th>");
tuple += ("<th>Price</th>");
tuple += ("<th>Book Option</th>");
return tuple;
};
function printTupleData(data) {
tuple = "";
tuple += ("<td>" + data["flight_no"] + "</td>");
tuple += ("<td>" + data["departure_destination"] + "</td>");
tuple += ("<td>" + data["arrival_destination"] + "</td>");
tuple += ("<td>" + data["departure_details"] + "</td>");
tuple += ("<td>" + data["arrival_details"] + "</td>");
tuple += ("<td>" + data["carrier_name"] + "</td>");
tuple += ("<td>" + data["plane_model_no"] + "</td>");
tuple += ("<td>$" + data["price"] + "</td>");
tuple += ("<td><button id = 'bookButton' onclick=bookFlight('" + data['flight_no'] + "', '" + data['departure_destination'] + "', '" + data["arrival_destination"] + "', '" + data["seat_class"] + "', '" + data['departure_details'] + "') value='Book Now'></button></td>");
console.log(tuple);
// tuple += ("<td><form id = 'bookForm'><fieldset><input value = 'Book Now' type = 'submit' class = 'btn btn-primary' id = 'bookButton'/></fieldset></form></td>");
//console.log(data["departure_details"]);
// flight ="
// + data["flight_no"] + " departureTime ='"+ data["departure_details"] +
// "' seatClass = "+ data["seat_class"] + "
//
return tuple;
};
</script>
</body>
</html>
航班预订系统
切换导航
出发城市：
抵达城市：
座位等级：
出发日期：
1150
选定座位：
$（“#resultsTable thead”）.remove（）；
$（“#resultsTable tbody”）.remove（）；
$（“#resultsTable”）.append（“+printTableHead（）+”）；
tableData=[{0:“JT216”，1:“捷星航空”，2:“新加坡”，
3：“曼谷”，
4: "2013-12-01 18:00:00",
5: "2013-12-01 19:30:00",
6: "80",
7:“B787”，
8.“经济”，
9: "80",
10: "100",
11:“JT216”，
12: "2013-12-01 18:00:00",
抵达目的地：“曼谷”，
抵达详情：“2013-12-01 19:30:00”，
可用座位：“80”，
容量：“80”，
承运人名称：“捷星航空”，
出发地点：新加坡，
出发详情：“2013-12-01 18:00:00”，
航班号：“JT216”，
飞机型号：“B787”，
价格：“100”，
座位等级：“经济舱”}]；
$.each（tableData，函数（）{
$（“#resultsTable”）.append（“+printTupleData（this）+”）；
log（“+printTupleData（this）+”）；
});
$（“#resultsTable”）.append（这是因为您没有将属性括在引号中，它以第一个空格结束
... onclick=\"bookFlight('" + data['flight_no'] + "', '" + data['departure_destination'] + "', '" + data["arrival_destination"] + "', '" + data["seat_class"] + "', '" + data['departure_details'] + "')\" ...
这是因为您没有将属性括在引号中，它以第一个空格结束
... onclick=\"bookFlight('" + data['flight_no'] + "', '" + data['departure_destination'] + "', '" + data["arrival_destination"] + "', '" + data["seat_class"] + "', '" + data['departure_details'] + "')\" ...
如果您想避免此类问题，我建议您查看HTML5数据属性：
您可以向按钮添加数据属性，如下所示：
<button class="book" data-flight-no="1" data-departure-destination="Belgium" data-arrival-destination="England">Book now</button>
有关如何在特定情况下实现此解决方案的信息，请参阅本JSFIDLE：
如果您想避免此类问题，我建议您查看HTML5数据属性：
您可以向按钮添加数据属性，如下所示：
<button class="book" data-flight-no="1" data-departure-destination="Belgium" data-arrival-destination="England">Book now</button>
有关如何在特定情况下实现此解决方案的信息，请参阅本JSFIDLE：
正确和精确：）正确和精确：）