2011-12-07 24 views
5

Tamam üzerinde odaklanın, bu yüzden bunun çoğu bugüne kadar yapılanlar, bende harika gidiyor, web siteme tabloların yerinde düzenlemeyi izin vermek için bir eklenti yapıyorum ama olsun gibi olamaz Tablonun sağa odaklanması. Birisi düzenleme işlemini tamamladıysa ve yeni bir satır düzenlemeye başlarsa veya sadece satırdan çıkarsa, kaydetmeli ve normale dönmelidir. Ancak satırda bulanıklık kullanırsam, yanıt yoktur, ancak öğede bulanıklığı kullanırsam, insanlar bir öğeden diğerine geçtiğinde tetikler.jQuery - TR

Ancak satırda odaklama kullanırsam, biri çıktığında tetiklenir Öğeyi, aynı satırda tıklasalar bile. Etkinlik değişkeni altında odaklanmayı hangi öğenin ayarlandığını belirten bir şey de yoktur. Bu nedenle, yalnızca satırda tıklayıp tıklamadıklarını görmek için mevcut satırla karşılaştırılamam. Ben/Fare Kaydet düğmesinin Click Enter tasarruf düzenlemeyi düşünüyorum

/Başka bir satır düzenlemeye başlayın, ama bunu yapmanın çok daha iyi bir yöntem gibi görünüyor doğrusu, bu iş iyi olur. Kimseyi düşündün mü? Lütfen?

+0

bazı örnek işaretlemeyi gönderebilir:

Böyle bir şey deneyebilirsiniz

? – kinakuta

cevap

3

Ben isteğinizi işlemek olur benim diğer tıklama etkinlikleri içinde stopPropagation() çağrısı eklenmesi sonra tüm belge için bir tıklama işleyicisi bağlama ve tarafından. Ben göstermek için setup bir keman ettik: http://jsfiddle.net/NwftK/

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

Ve jQuery:

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

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

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

}); 
+0

kaydetmiyor, teşekkürler. –

1

sorun unsurları iç içe geçmiş olsa bile alt öğelerinden biri odaklanmak zaman, focusOut üst öğe üzerinde tetikleyecek olmasıdır. Düşünebildiğim bir çözüm, mevcut satırı bir değişken kullanarak takip etmektir. sahte kod böyle bir şey işe yarayabilecek:

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; 
         }); 
+0

Bunu düşünüyordum, ama tablonun dışına tıklarsa –

0

Eğer satır odağı kaybettiğinde masanın içindeyken, One algılamak gerekir 2 durumlar vardır ve masayı terk ettiğinizde iki tane.

//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(); 
    }; 
})