Блог

привет, у меня есть таблица с несколькими строками, и в каждой строке есть кнопка для редактирования данных этих строк

вот моя таблица

 <table>
<tr>
<td  class="it_name"> 1111 </td> 
<td  class="it_price"> 1111 </td> 
<td  class="it_info"> 1111 </td> 
<td  class="it_val"> 1111 </td> 
<td  class="BTN"> <INPUT TYPE="button" CLASS="edit_items" /> <td/> 
</tr>
<tr>
...
</tr>
</table>
  

в одном из tds у меня есть кнопка, которую я собираюсь использовать для редактирования этой строки

сначала я получаю значение каждого td в этой строке, затем я собираюсь поместить текстовое поле в этот td и установить значение этого текстового поля на старое значение этого td

и, наконец, я собираюсь изменить кнопку на другую кнопку для завершения редактирования

 jq(function(){
jq('.edit_items').click(function(){

/////// getting value of each td                    
var  name  = jq.trim(jq(this).parent().siblings('.it_name').text());
var  price = jq.trim(jq(this).parent().siblings('.it_price').text());
var info   = jq.trim(jq(this).parent().siblings('.it_info').text());
var   av   = jq.trim(jq(this).parent().siblings('.it_av').text());

////// putting a textfild on each td

jq(this).parent().siblings('.it_name').html('<input class="it_name_f" type="text" value="' name '" />');

jq(this).parent().siblings('.it_price').html('<input class="it_price_f" type="text" value="' price '" />');

jq(this).parent().siblings('.it_info').html('<input class="it_info_f" type="text"   value="' info '" />');

jq(this).parent().siblings('.it_av').html('<input class="it_va_f" type="text" value="' va '" />'); 

 ///////// changing button                  
jq(this).parent().html('<input name="" class="final" type="button" value="edit_now" />');
})
  

теперь он отлично работает при размещении текстового поля в tds, но по какой-то причине кажется, что я не могу изменить свою кнопку после того, как я изменил другой html tds!
или
, если я переместил строку кнопки изменения (которая является последней в этом коде)

 jq(this).parent().html('<input name="" class="final" type="button" value="edit_now" />');
  

в верхней части моего кода теперь кнопка меняется, но другие tds не собираются менять ее так или иначе!
я что-то упустил?

Вопреки моему здравому смыслу, у меня есть эта скрипка: http://jsfiddle.net/dTncS/3 /

Для создания скрипки потребовалось удивительно много работы, потому что исходное сообщение не копировало / вставляло код, над которым вы работали. Были опечатки и недостающие фрагменты, которые необходимо было исправить, прежде чем проблема могла быть решена. Вот почему всегда полезно иметь готовый пример кода. Однако даже без образца опечатки сбивают с толку человека, который в противном случае был бы рад помочь.

В скрипте можно выполнить еще больше кэширования, но я хотел сохранить код в состоянии, более похожем на то, что вы написали. Нет смысла сходить с ума от вас. 😉

 var jq = jQuery.noConflict();

jq(function() {

    var $table = jq('table');

    // any time there's a finalize button in a table, bind this to it
    $table.delegate('.final', 'click', function() {
        // do finalize stuff here
        alert('finalizing!');
    });

    // ditto for edit_items buttons. Bind this to those              
    $table.delegate('.edit_items', 'click', function() {

        var $thisParent = jq(this).parent(); // for the love of all things good and holy, cache!
        /////// getting value of each td                    
        var name = jq.trim($thisParent.siblings('.it_name').text()),
            price = jq.trim($thisParent.siblings('.it_price').text()),
            info = jq.trim($thisParent.siblings('.it_info').text()),
            av = jq.trim($thisParent.siblings('.it_av').text());

        ////// putting a textfild on each td
        $thisParent.siblings('.it_name').html('<input class="it_name_f" type="text" value="'   name   '" />');
        $thisParent.siblings('.it_price').html('<input class="it_price_f" type="text" value="'   price   '" />');
        $thisParent.siblings('.it_info').html('<input class="it_info_f" type="text"   value="'   info   '" />');
        $thisParent.siblings('.it_av').html('<input class="it_va_f" type="text" value="'   av   '" />');

        $thisParent.html('<input name="" class="final" type="button" value="finalize" />');
    });
});
  

Насколько я могу судить, причина, по которой ваш оригинал не работал (даже если он не был в состоянии готовности к производству IMO), заключается только в одной причине: вы пытались использовать переменную «va», когда объявленная вами переменная была «av». Использование консоли JavaScript предупредит вас о подобных проблемах на ранней стадии.

Основные улучшения, из которых вы должны извлечь уроки::

1. кэшируйте свои объекты jQuery. Нет абсолютно никакой причины использовать $(this) столько раз, сколько вы делали, когда вы можете просто кэшировать его в переменной. Поскольку каждый из ваших вызовов $(this) …siblings() выполняется дважды, вы можете пойти еще дальше и кэшировать их тоже. Я этого не делал.

2. использовать .делегировать (), особенно когда вы знаете, что собираетесь добавлять и удалять узлы из DOM. Это просто намного проще.

Одна вещь, которую вам нужно будет изучить по мере продвижения, — это использование итератора (в jQuery .each() довольно прост; но есть и другие, такие как циклы «for» и «while», которыми вы могли бы воспользоваться). Вы заметите, что каждая из ваших 4 строк, получающих текст, представляет собой почти один и тот же код. Тогда ваши 4 строки, создающие текстовые поля, представляют собой почти тот же код. Вы могли бы создать фрагмент кода, который просто повторяется X # раз, меняя местами значения по мере необходимости.