我正在尝试制作一个表单，它应该是一个弹出模式，当提交时数据存储在动态 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 数据:- 国家.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"}]
最佳答案
您什么也得不到，因为表格中的这个按钮是动态创建的，因此，在文档加载时甚至没有附加任何内容。一个简单的解决方法是附加到文档并将元素的类名作为第二个参数传递，如下所示:
$(document).on('click', '.hit', function () {
var value = $(this).closest('tr').children('td:first').text();
alert(value);
});
关于javascript - 如何将HTML表格数据反馈到Form中进行编辑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49710907/