Cách đặt id hàng của bảng trong JavaScript

Thực sự hy vọng ai đó có thể giúp tôi ở đây. Tôi vẫn là người mới sử dụng JS và đã vật lộn với điều này trong hai ngày qua. Đây là ứng dụng dành cho thiết bị di động được xây dựng bằng Framework7

Tôi đang tự động xây dựng một bảng html với dữ liệu JSON và tôi đang cố lấy ID hàng khi một hàng của bảng được nhấp vào. Cho đến nay mã của tôi như sau [tôi đã bao gồm các nhận xét]

//Do something when button is clicked
$$['.page-content'].find['#airconSearch'].on['click', function [e] {  
  //Show preloader
  app.preloader.show[];
  //Request JSON data
  app.request.json['my-URL', function [data] {
    var tableHtml = '';
      for[var i = 0; i < data.length; i+=1]{
        //Use JSON data to give each row an ID and populate the 3 columns
        tableHtml+= '' +data[i].brand+ ' ' +data[i].model+ ' ' +data[i].ac_31_eeclassc+ '';        
      }  
    //Add the columns to the html table  
    $$['.data-table #airconList'].html[tableHtml];
    //Hide preloader after function is complete
    app.preloader.hide[];
    //Do something when a table row is clicked
    $$['.data-table #airconList tr'].on['click', e => {  
      //Get the clicked row ID
      var zaf = $$['.data-table #airconList tr'].attr["id"];
      //Log the ID to the console
      console.log[zaf];        
    }]  
  }]          
}] 

Bảng động được xây dựng không có vấn đề gì và bảng điều khiển hiển thị rằng mỗi hàng có một ID

Tuy nhiên, khi tôi nhấp vào bất kỳ hàng nào trong bảng, bảng điều khiển sẽ tiếp tục ghi ID cho hàng đầu tiên. Có ai có một giải pháp khả thi cho việc này không?

Kiếm thu nhập với kỹ năng HTML của bạn

Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn.
Chúng tôi đang xây dựng thị trường việc làm tự do lớn nhất dành cho những người như bạn.

Theo mặc định, Trình chỉnh sửa sẽ sử dụng thuộc tính id của phần tử tr để xác định hàng cho máy chủ [cụ thể hơn, thuộc tính này thường sẽ chứa khóa chính của cơ sở dữ liệu để nhận dạng duy nhất hàng]. Mặc dù phương pháp mặc định này có thể rất hữu ích, đặc biệt nếu bạn sử dụng tùy chọn DT_RowId JSON để đặt id, bạn có thể muốn đọc id của hàng từ nguồn dữ liệu JSON, thay vì DOM. Điều này được thực hiện dễ dàng bằng cách sử dụng tùy chọn idSrc

Ví dụ bên dưới, với idSrc được đặt thành id phù hợp với trường hợp các đối tượng nguồn dữ liệu trông giống như. { "id": 2, "first_name": "Fiona", ...}. Giống như các tùy chọn nguồn dữ liệu khác, tùy chọn idSrc có thể được cung cấp trong ký hiệu đối tượng chấm để đọc các đối tượng lồng nhau

TênVị tríVăn phòngExtn. Ngày bắt đầuLươngTênChức vụVăn phòngExtn. Ngày bắt đầuLương

• Javascript
• HTML
• CSS
• Ajax
• Kịch bản phía máy chủ

Javascript hiển thị bên dưới được sử dụng để khởi tạo bảng được hiển thị trong ví dụ này

var editor; // use a global for the submit and return data rendering in the examples $[document].ready[function[] { editor = new $.fn.dataTable.Editor[ { "ajax": "../../controllers/jsonId.php", "table": "#example", "idSrc": "id", "fields": [ { "label": "First name:", "name": "first_name" }, { "label": "Last name:", "name": "last_name" }, { "label": "Position:", "name": "position" }, { "label": "Office:", "name": "office" }, { "label": "Extension:", "name": "extn" }, { "label": "Start date:", "name": "start_date", "type": "datetime" }, { "label": "Salary:", "name": "salary" } ] } ]; $['#example'].DataTable[ { dom: "Bfrtip", ajax: "../../controllers/jsonId.php", columns: [ { data: null, render: function [ data, type, row ] { // Combine the first and last names into a single table field return data.first_name+' '+data.last_name; } }, { data: "position" }, { data: "office" }, { data: "extn" }, { data: "start_date" }, { data: "salary", render: $.fn.dataTable.render.number[ ',', '.', 0, '$' ] } ], select: true, buttons: [ { extend: "create", editor: editor }, { extend: "edit", editor: editor }, { extend: "remove", editor: editor } ] } ]; } ];

Ngoài đoạn mã trên, các tệp thư viện Javascript sau được tải để sử dụng trong ví dụ này

HTML được hiển thị bên dưới là phần tử bảng HTML thô, trước khi nó được DataTables nâng cao

Ví dụ này sử dụng một chút CSS bổ sung ngoài nội dung được tải từ các tệp thư viện [bên dưới], để hiển thị chính xác bảng. CSS bổ sung được sử dụng được hiển thị bên dưới

Các tệp thư viện CSS sau đây được tải để sử dụng trong ví dụ này nhằm cung cấp kiểu dáng của bảng

Bảng này tải dữ liệu bằng Ajax. Dữ liệu mới nhất đã được tải được hiển thị bên dưới. Dữ liệu này sẽ tự động cập nhật khi có bất kỳ dữ liệu bổ sung nào được tải

Làm cách nào để lấy id hàng hiện tại trong javascript?

Làm cách nào để lấy số hàng trong Javascript cho bảng?

Làm cách nào để tạo id bảng trong Javascript?

Làm cách nào để thêm id vào hàng javascript của bảng?