我正在尝试创建一个表单，它应该是一个弹出模式，在提交时，数据存储在动态HTML表格中，并且每行数据在最后一列中都有一个“编辑”按钮点击后将数据反馈回表格并提交。
直到现在我已经完成了从表单中创建动态html表。我无法将表数据反馈到表单中。请帮忙......
我的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.container {
padding: 20px;
}
.modal-dialog {
position: absolute;
top: 25px;
left: 200px;
}
#popTab td,
#popTab th {
border: 1px solid #ddd;
padding: 8px;
}
#popTab tr:nth-child(even) {
background-color: #f2f2f2;
}
#popTab tr:hover {
background-color: #ddd;
}
#popTab th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
#popTab {
position: absolute;
top: 500px;
border-collapse: collapse;
width: 80%
}
</style>
<title>Assignment</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button id="showModal" class="btn btn-primary btn-sm">Click Here</button>
<div class="modal fade" data-backdrop="static" id="popup" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-tile">Population Form</h4>
<button class="close" id="closeModal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="country">Country</label>
<select name="country" id="country" class="form-control">
<option value="">Select country</option>
</select>
</div>
<div class="form-group">
<label for="city">City</label>
<select name="city" id="city" class="form-control">
<option value="">Select city</option>
</select>
</div>
<div class="form-group">
<label for="population">Population</label>
<input class="form-control" type=text name="population" id="population" placeholder="Enter Population" maxlength=8 onkeypress='return isNumberKey(event)'>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="save">Save</button>
<button class="btn btn-primary" id="hideModal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<table border="1" id="popTab">
<thead>
<tr>
<th>Sl. No.</th>
<th>Country</th>
<th>City</th>
<th>Population</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#showModal').click(function () {
$('#popup').modal('show');
});
$('#hideModal').click(function () {
$('#popup').modal('hide');
});
$('#closeModal').click(function () {
$('#popup').modal('hide');
});
var countryOptions;
var cityOptions;
$.getJSON('Country.json', function (result) {
countryOptions = '<option value="">Select country</option>';
$.each(result, function () {
var name = $(this).attr("country_name");
countryOptions += '<option value="' + name + '">' + name + '</option>';
});
$('#country').html(countryOptions);
});
$("#country").change(function () {
cityOptions = '<option value="">Select city</option>';
if ($(this).val() == "United Kingdom") {
$.getJSON('city_uk.json', function (result) {
$.each(result, function () {
var name = $(this).attr("city_name");
cityOptions += "<option value='" + name + "'>" + name +
"</option>";
});
$('#city').html(cityOptions);
});
} else if ($(this).val() == "New Zealand") {
$.getJSON('city_nz.json', function (result) {
$.each(result, function () {
var name = $(this).attr("city_name");
cityOptions += "<option value='" + name + "'>" + name +
"</option>";
});
$('#city').html(cityOptions);
});
} else if ($(this).val() == "Canada") {
$.getJSON('city_canada.json', function (result) {
$.each(result, function () {
var name = $(this).attr("city_name");
cityOptions += "<option value='" + name + "'>" + name +
"</option>";
});
$('#city').html(cityOptions);
});
} else if ($(this).val() == "Australia") {
$.getJSON('city_aus.json', function (result) {
$.each(result, function () {
var name = $(this).attr("city_name");
cityOptions += "<option value='" + name + "'>" + name +
"</option>";
});
$('#city').html(cityOptions);
});
}
});
var sKey = 0;
$("#save").click(function () {
var country = $("#country").val();
var city = $("#city").val();
var population = $("#population").val();
var markup = "<tr><td>" + (sKey + 1) + "</td><td>" + country + "</td><td>" + city +
"</td><td>" + population +
"</td><td><button type='button' class='hit'>Edit</button>"
"</td></tr>";
$("table tbody").append(markup);
$("form").trigger("reset");
$('#popup').modal('hide');
sKey++;
});
});
$(".hit").click(function () {
var value = $(this).closest('tr').children('td:first').text();
alert(value);
});
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
</body>
</html>
为什么这个功能现在有效？按下html表中的按钮，这应该获取相应行的第一个单元格。请帮忙......
$(".hit").click(function () {
var value = $(this).closest('tr').children('td:first').text();
alert(value);
});
json数据： - Country.json
[{"country_code":"CA","country_name":"Canada"},{"country_code":"UK","country_name":"United Kingdom"},{"country_code":"AU","country_name":"Australia"},{"country_code":"NZ","country_name":"New Zealand"}]
city_uk.json
[{"city_code":"AR","city_name":"Armagh"},{"city_code":"BR","city_name":"Bristol"},{"city_code":"CM","city_name":"Cambridge"},{"city_code":"GL","city_name":"Glasgow"},{"city_code":"HR","city_name":"Hereford"},{"city_code":"LV","city_name":"Liverpool"},{"city_code":"MN","city_name":"Manchester"},{"city_code":"NW","city_name":"Newcastle upon Tyne"}]
city_nz.json
[{"city_code":"AU","city_name":"Auckland"},{"city_code":"CH","city_name":"Christchurch"},{"city_code":"HM","city_name":"Hamilton"},{"city_code":"TA","city_name":"Tauranga"},{"city_code":"NH","city_name":"Napier-Hastings"},{"city_code":"NE","city_name":"Nelson"},{"city_code":"RO","city_name":"Rotorua"},{"city_code":"WL","city_name":"Wellington"}]
city_canada.json
[{"city_code":"CP","city_name":"Capitals"},{"city_code":"AL","city_name":"Alberta"},{"city_code":"BC","city_name":"British Columbia"},{"city_code":"MN","city_name":"Manitoba"},{"city_code":"NB","city_name":"New Brunswick"},{"city_code":"NL","city_name":"Newfoundland and Labrador"},{"city_code":"NT","city_name":"Northwest Territories"},{"city_code":"NS","city_name":"Nova Scotia"}]
city_aus.json
[{"city_code":"AL","city_name":"Albury"},{"city_code":"BT","city_name":"Bathurst"},{"city_code":"OR","city_name":"Orange"},{"city_code":"PR","city_name":"Penrith"},{"city_code":"SY","city_name":"Sydney"},{"city_code":"QB","city_name":"Queanbeyan"},{"city_code":"WA","city_name":"Wagga Wagga"},{"city_code":"NO","city_name":"Wollongong"}]
答案 0 :(得分：1)
你没有得到任何东西，因为表中的这个按钮是动态创建的，因此，甚至没有附加在文档加载上。一个简单的解决方法是附加到document并将元素的类名作为第二个参数传递，如下所示：
$(document).on('click', '.hit', function () {
var value = $(this).closest('tr').children('td:first').text();
alert(value);
});