使用javascript从<table>中选择一行

Question

我试图通过单击表中的一行来从数据库中删除一行。然后，使用ajax请求通过从行中获取ID来删除该行。

我的html是：

<div>
    <table class="table table-striped" id="tabble">
        <th>Id</th>
        <th>Name</th>
        <th></th>
        <tbody id="tab"></tbody>

    </table>

    <h3>Add a row to the database</h3>
    <input id="NewPosition" />
    <button onclick="PostData()" class="btn btn-info">Post data</button>
</div>

<button id="Save" class="btn btn-success" onclick="UpdateData()">Update data</button>

我的Javascript：

$(document).ready(function () {

        UpdateData();
    });


    $('#tabble tr').click(function () {
        console.log("It works!!!");
        var value = $(this).find('td:first').html();
        alert("Picked value is: " + value);


    });

    function PostData() {

        var position = new Object();
        position.PositionDescription = $('#NewPosition').val(),
            $.ajax({
                url: 'http://localhost:50663/api/CropAssignments',
                type: 'POST',
                dataType: 'json',
                data: position,
                async: false,
                //success: function (data, textStatus, xhr) {
                //    console.log(data);
                //},
                error: function (xhr, textStatus, errorThrown) {
                    console.log('Error in Operation');
                }

            });

        UpdateData();
    };

    function UpdateData() {

        var tabBody = $('#tab');
        tabBody.empty();
        var tabulka = '';
        //obj.CropAssignments.PositionId = $('#container').val();
        $.ajax({
            url: 'http://localhost:50663/api/PositionsAPI',
            type: 'GET',
            dataType: 'json',
            success: function (data, textStatus, xhr) {

                //data.forEach(function (item, index) {
                //    console.log(index + " " + item.PositionDescription);
                //});

                data.forEach(function (item, index) {
                    tabulka += '<tr><td>' + item.PositionId + '</td><td>' + item.PositionDescription + '</td><td><i class="far fa-trash-alt" style="color: red"></i></td></tr>';
                    //console.log(index + " " + item.PositionDescription);
                });

                tabBody.append(tabulka);
                tabBody.sort();

            },
            error: function (xhr, textStatus, errorThrown) {
                console.log('Error in Operation');
            }

        });
    };

这部分代码应该可以解决问题，但是它什么也没做：

$(document).ready(function () {

        UpdateData();
    });

我尝试根据此示例http://jsfiddle.net/65JPw/2/进行此操作。

有什么想法吗？

任何帮助都非常感激：）