javascript - JQueryを使用してテーブルの最初のtdの値を取得するには?

Question

Form からの値をバインドしたテーブルがあります。そのフォームには、主キー Field が TicketId としてあり、フォームに非表示のままにして、テーブルに挿入しながら表示しています。ノックアウトを使用したデータをバインドするために、選択する行を削除したいので、選択中にその行のIDを取得して、ajaxを使用して削除アクションに渡すことができますが、私の問題は私はそのIDを取得していません。どうすればこれを行うことができますか? 私のコード:

<table id="table2" style="border: double">
                            <thead>
                                <tr>
                                    <td>Ticket ID</td>
                                    <td>Ticket Type</td>
                                    <td>No of Tickets</td>
                                    <td>Ticket Price</td>
                                    <td>Start Date</td>
                                    <td>End Date</td>
                                    <td>Action</td>
                                </tr>
                            </thead>
                            <!--Iterate through an observableArray using foreach-->
                            <tbody id="ticketid" data-bind="foreach:TicketDatas">
                                <tr  style="border: solid" data-bind="click: $root.getselectedTicket" id="updtr">
                                    <td id="rowid" data-bind="text:TicketId">@*<span data-bind="text:No_Of_Ticket"></span>*@</td>
                                    <td data-bind="text:SelectedTicketType">@*<span data-bind="text:No_Of_Ticket"></span>*@</td>
                                    <td data-bind="text:No_Of_Ticket">@*<span data-bind="text:No_Of_Ticket"></span>*@</td>
                                    <td data-bind="text:Ticket_Price">@*<span data-bind="text:Ticket_Price"></span>*@</td>
                                    <td data-bind="text:Start_Date">@*<span data-bind="text:Start_Date"></span>*@</td>
                                    <td data-bind="text:End_Date">@*<span data-bind="text:End_Date"></span>*@</td>
                                    <td>
                                        <button data-bind="click: $root.deleterec">Delete</button></td>
                                </tr>
                            </tbody>
                        </table>
<script type="text/javasript">
 self.deleterec = function () {
                if (confirm('Are you sure to Delete this ticket ??')) {
                    var tickid = $("#table2 tr:eq(0)").attr("id");
                    $.ajax({
                        type: "POST",
                        data: { id: tickid },
                        url: "Ticket/DeleteTicket",
                        //data: "{id:" + ko.toJSON(id) + "}",
                        success: function (data) {
                            self.TicketDatas.remove(data);
                            alert("Record Deleted Successfully");
                            //GetTickets();//Refresh the Table
                        },
                        error: function (error) {
                            alert(error.status + "<--and--> " + error.statusText);
                        }
                    });

                }
            };
</script>

簡単に言えば、このステートメントの解決策が欲しいだけです

var tickid = $("#table2 tr:eq(0)").attr("id");

Answer 1

コードの残りの部分がどうなるかはわかりませんが、削除リンクの DOM ノードへの参照がある場合の jQuery の部分を次に示します。

ここでは、よりわかりやすいようにほとんどの部分を変数名に割り当てましたが、使用するためにこれをより簡潔にすることができます。

$('#table2 .delete-link').click(function() {
  var deleteLink = $(this);
  var tableRow = deleteLink.closest('tr');
  var firstCell = tableRow.find('td:first-child');
  var ticketId = firstCell.attr('id');

  // ... Do what you need to do with the ticket ID.

  return false;
});

追加の参考資料:

• CSS 疑似クラス:first-child
• jQueryclick()
• jQueryclosest()
• jQueryfind()

Answer 2

var tickid = $("#table2 tr:eq(0)").html();

また

var tickid = $("#table2 tr:eq(0)").val();