如何将HTML表格数据反馈到表单中进行编辑

时间:2018-04-07 18:58:40

标签: javascript jquery json ajax html-table

我正在尝试创建一个表单,它应该是一个弹出模式,在提交时,数据存储在动态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">&times;</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"}]

1 个答案:

答案 0 :(得分:1)

你没有得到任何东西,因为表中的这个按钮是动态创建的,因此,甚至没有附加在文档加载上。一个简单的解决方法是附加到document并将元素的类名作为第二个参数传递,如下所示:

$(document).on('click', '.hit', function () {
    var value = $(this).closest('tr').children('td:first').text();
    alert(value);
});