jQuery - Tập trung vào TR

Question

Được rồi, vì vậy tôi đang tạo một plugin để cho phép chỉnh sửa nội tuyến các bảng trong trang web của tôi, cho đến nay, tôi đã hoàn thành hầu hết, nhưng dường như tôi không thể Tập trung ra khỏi bảng bên phải. Vì vậy, nếu ai đó đang chỉnh sửa xong và bắt đầu chỉnh sửa hàng mới hoặc chỉ cần nhấp chuột ra khỏi hàng, nó sẽ lưu và quay lại bình thường. Nhưng nếu tôi sử dụng làm mờ trên hàng, không có phản hồi, nhưng nếu tôi sử dụng làm mờ trên phần tử, nó sẽ kích hoạt khi mọi người đổi từ một phần tử này sang một phần tử khác

Nhưng nếu tôi sử dụng tiêu điểm trên hàng, nó sẽ kích hoạt bất cứ khi nào có người phần tử là tốt, ngay cả khi chúng nhấp vào cùng một hàng. Cũng không có bất kỳ điều gì dưới biến sự kiện cho tôi biết yếu tố nào mà nó tập trung vào, vì vậy tôi không thể so sánh với hàng hiện tại để xem liệu chúng có đang nhấp vào trong hàng hay không.

Tôi đang nghĩ đến việc lưu nó vào nút Enter/Mouse Bấm vào nút Lưu/Bắt đầu chỉnh sửa hàng khác, nhưng tôi muốn làm việc này, vì nó có vẻ là một phương pháp tốt hơn để thực hiện nó. Có ai nghĩ không? Xin vui lòng?

Answer 1

tôi sẽ xử lý yêu cầu của bạn bằng cách gắn một handler nhấp chuột cho toàn bộ tài liệu, và sau đó thêm một cuộc gọi stopPropagation() trong sự kiện nhấp chuột khác của tôi. Tôi đã thiết lập một fiddle để chứng minh: http://jsfiddle.net/NwftK/

<table border="1" width="200"> 
    <tr id="myRow"><td>Hello</td><td>World</td></tr> 
</table> 

Và jQuery:

$(function() { 
    $("#myRow").on('click', function (e) { 
     $(this).css('background-color', 'blue'); 
     e.stopPropagation(); 
    }); 

    $(document).on('click', function() { 

     $("#myRow").css('background-color', 'red'); 
    }); 

}); 

Answer 2

Vấn đề là ngay cả khi bạn có phần tử lồng nhau, tiêu điểm sẽ kích hoạt trên phần tử cha khi bạn tập trung vào một trong các phần tử con. Một giải pháp mà tôi có thể nghĩ đến là theo dõi hàng hiện tại bằng cách sử dụng một biến. Mã giả có thể làm việc gì đó như thế này:

var row = ''; 
$(table_element).click(function() { 
          focused_row = $(this).parent(); 
          if(row != '' && focused_row != row) { 
           //code to save edits, user clicked different row 
          } 
          row = focused_row; 
         }); 

Answer 3

Có 2 trường hợp bạn cần để phát hiện khi hàng mất tập trung, Một khi bạn đang ở trong bàn và hai khi bạn rời khỏi bàn.

Bạn có thể thử một cái gì đó như thế này:

//store the last visited row 
var row = false; 

// save the row if has changed 
function save() { 
    if (row.changed){ 
     console.log("save"); 
    } 
} 

// keep track of the row you are in 
// it doesnt work when you leave the table 
$("tr").on("focusin", function (e) { 
    if (row != this){ 
     if (row){ 
      save(); 
     } 
     row = this; 
     e.stopPropagation(); 
    } 
}); 

//keep track whenever the row changes 
$("tr").on("change", function (e) { 
    this.changed = true; 
    console.log("changed"); 
}) 

//triggers when you leave the table, you can try to save changes then. 
$(document).on("focusin", function (e) { 
    var el = $(e.target); //input or element that triggers this event 
    var elrow = el.parent().parent()[0]; // try to get the row from that input, ... if its an input 
    if (row && row !=elrow) { 
     save(); 
     e.stopPropagation(); 
    }; 
})