2015-10-13 2 views
0

У меня есть демо здесь моя проблема: http://codepen.io/anon/pen/rOzQajКак сохранить все входные значения?

$(document).ready(function(){ 

    $('.del').on('click', function(){ 
     $(this).closest('tr').fadeOut(450); 
     if ($('.read_content').is(':visible')) { 
      $('.read_content').fadeOut(1000); 
     }; 
    }); 

    $('.read').on('click', function(){ 
     $('.read_content').toggle();   
     $('.name').html($(this).closest('tr').find('.user_name').html()); 
     $('.email').html($(this).closest('tr').find('.user_email').html()); 
     $('.phone').html($(this).closest('tr').find('.user_phone').html());  
    }); 

    $('.edit').on('click', function(){ 
     $(this).closest('tr').find('td:lt(3)').toggleClass('ready'); 

     if ($(this).closest('tr').find('td:lt(3)').hasClass('ready')) {   
      $(this).html('Save'); 
      $(this).closest('tr').find('td:lt(3)').html('').append('<input class="vals" type="text">');  
     } 
     else{   
      $(this).closest('tr').find('td:lt(3)').html($('.vals').val()); 
      $(this).html('Edit').removeClass('ready'); 
     }  
    }); 
}); 

, что i`m пытается сделать это, когда я нажимаю на редактирования (изменения текста, чтобы сохранить) кнопку, каждый текст TD элемент будет изменен на вход поэтому можно редактировать каждое поле (имя, адрес электронной почты, телефон), и когда я снова нажимаю на сохранение, поля меняются, но только с текстом первого поля, так как я могу заставить его сохранять разные данные в каждом поле?

, например, теперь, если вы печатаете для
Имя: против
Email: [email protected]
телефон: 32323

и при нажатии кнопки сохранить все поля изменится на V, а различные данные для всех почтовых и телефонных полей.

ответ

3

Ваша еще часть в edit обработчик щелчка должен быть таким:

.... 
$(this).closest('tr').find('td:lt(3)').each(function(){ 
    $(this).html($(this).find(".vals").val()); 
}); 
.... 

Так что ваш edit обработчик будет выглядеть следующим образом:

$('.edit').on('click', function(){ 
    $(this).closest('tr').find('td:lt(3)').toggleClass('ready'); 

    if ($(this).closest('tr').find('td:lt(3)').hasClass('ready')) {   
     $(this).html('Save'); 
     $(this).closest('tr').find('td:lt(3)').html('').append('<input class="vals" type="text">');  
    } 
    else{  
     // OBSERVE THE CHANGE HERE 
     $(this).closest('tr').find('td:lt(3)').each(function(){ 
      $(this).html($(this).find(".vals").val()); //$(this) refers to the each td 
     }); 
     $(this).html('Edit').removeClass('ready'); 
    }  
}); 

Смотреть весь рабочий код ниже

$(document).ready(function(){ 
 

 
\t $('.del').on('click', function(){ 
 
\t \t $(this).closest('tr').fadeOut(450); 
 
\t \t if ($('.read_content').is(':visible')) { 
 
\t \t \t $('.read_content').fadeOut(1000); 
 
\t \t }; 
 
\t }); 
 

 
\t $('.read').on('click', function(){ 
 
\t \t $('.read_content').toggle(); \t \t 
 
\t \t $('.name').html($(this).closest('tr').find('.user_name').html()); 
 
\t \t $('.email').html($(this).closest('tr').find('.user_email').html()); 
 
\t \t $('.phone').html($(this).closest('tr').find('.user_phone').html()); \t \t 
 
\t }); 
 

 
\t $('.edit').on('click', function(){ 
 
\t \t $(this).closest('tr').find('td:lt(3)').toggleClass('ready'); 
 
\t \t 
 
\t \t if ($(this).closest('tr').find('td:lt(3)').hasClass('ready')) { \t \t 
 
\t \t \t $(this).html('Save'); 
 
\t \t \t $(this).closest('tr').find('td:lt(3)').html('').append('<input class="vals" type="text">'); \t \t 
 
\t \t } 
 
\t \t else{ \t \t 
 
      // OBSERVE THE CHANGE HERE \t 
 
\t \t \t $(this).closest('tr').find('td:lt(3)').each(function(){ 
 
       $(this).html($(this).find(".vals").val()); 
 
      }); 
 
\t \t \t $(this).html('Edit').removeClass('ready'); 
 
\t \t } \t \t 
 
\t }); 
 
});
.read_content{ 
 
\t margin: 105px 0 0 25px; 
 
\t width: 350px; \t 
 
\t border: 1px solid black; 
 
\t display: none; 
 
} 
 

 
.edit{ 
 
\t background-color: green; 
 
\t color: #fff; 
 
} 
 

 
.del{ 
 
\t background-color: red; 
 
\t color: #fff; 
 
} 
 

 
.green{ 
 
\t background-color: green; 
 
} 
 

 
.ready{ \t 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="tab" border=1 cellpadding=5px> 
 
\t \t <thead> 
 
\t \t \t <tr> 
 
\t \t \t \t <th>Name</th> 
 
\t \t \t \t <th>Email</th> 
 
\t \t \t \t <th>Phone</th> \t 
 
\t \t \t \t <th colspan="3">Actions</th> \t \t \t 
 
\t \t \t </tr> 
 
\t \t </thead> 
 
\t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td class="user_name">John Shepard</td> 
 
\t \t \t \t <td class="user_email">[email protected]</td> 
 
\t \t \t \t <td class="user_phone">202105</td> 
 
\t \t \t \t <td> 
 
\t \t \t \t \t <button class="read">Read</button> 
 
\t \t \t \t \t <button class="edit">Edit</button> 
 
\t \t \t \t \t <button class="del">Delete</button> 
 
\t \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td class="user_name">Aria T`Loak</td> 
 
\t \t \t \t <td class="user_email">[email protected]</td> 
 
\t \t \t \t <td class="user_phone">303102</td> 
 
\t \t \t \t <td> 
 
\t \t \t \t \t <button class="read">Read</button> 
 
\t \t \t \t \t <button class="edit">Edit</button> 
 
\t \t \t \t \t <button class="del">Delete</button> 
 
\t \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td class="user_name">Liara T`Soni</td> 
 
\t \t \t \t <td class="user_email">[email protected]</td> 
 
\t \t \t \t <td class="user_phone">405098</td> 
 
\t \t \t \t <td> 
 
\t \t \t \t \t <button class="read">Read</button> 
 
\t \t \t \t \t <button class="edit">Edit</button> 
 
\t \t \t \t \t <button class="del">Delete</button> 
 
\t \t \t \t </td> 
 
\t \t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 

 
\t <div class="read_content"> 
 
\t \t <label>Name:</label><span class="name"></span><br> 
 
\t \t <label>Email:</label><span class="email"></span><br> 
 
\t \t <label>Phone:</label><span class="phone"></span> 
 
\t </div>

Также ручка, упаковывают вам это нужно: http://codepen.io/anon/pen/wKqQJw

+0

молодец я собирался предложить О.П. использовать идентификатор атрибута для каждого поля и получить его индивидуально –

+0

«Редактор "не поддерживает предыдущее значение – Aroniaina

+0

@Aroniaina: Я не думаю, что он делает это в оригинальной ручке, предоставленной OP либо –

1

Почему не нравится это, а также улучшить CSS

$(document).ready(function(){ 
 
    $(".input-form").prop('disabled',true); 
 
    $('.del').on('click', function(){ 
 
    $(this).closest('tr').fadeOut(450); 
 
    if ($('.read_content').is(':visible')) { 
 
     $('.read_content').fadeOut(1000); 
 
    }; 
 
    }); 
 

 
    $('.read').on('click', function(){ 
 
    $('.read_content').toggle(); \t \t 
 
    $('.name').html($(this).closest('tr').find('.name-input').val()); 
 
    $('.email').html($(this).closest('tr').find('.mail-input').val()); 
 
    $('.phone').html($(this).closest('tr').find('.phone-input').val()); \t \t 
 
    }); 
 

 
    $('.edit').on('click', function(){ 
 
    var toDo = $(this).html(); 
 
    if(toDo == "Edit"){ 
 
     $(this).html("Save"); 
 
     $(this).closest('tr').find('.input-form').prop('disabled',false); 
 
     $(this).closest('tr').find('.input-form').addClass("active"); 
 
    } 
 
    else if((toDo == "Save")){ 
 
     $(this).html("Edit"); 
 
     $(this).closest('tr').find('.input-form').prop('disabled',true); 
 
     $(this).closest('tr').find('.input-form').removeClass("active");      
 
    } \t \t 
 
    }); 
 
});
.read_content{ 
 
     margin: 105px 0 0 25px; 
 
     width: 350px; 
 
     border: 1px solid black; 
 
     display: none; 
 
} 
 

 
.edit{ 
 
     background-color: green; 
 
     color: #fff; 
 
} 
 

 
.del{ 
 
     background-color: red; 
 
     color: #fff; 
 
} 
 

 
.green{ 
 
     background-color: green; 
 
} 
 

 
.ready{ \t 
 
} 
 

 
.input-form{ 
 
    border-style: solid; 
 
    border-color: #006dcc; 
 
    border-width: 2px; 
 
    margin: 3px; 
 
    background-color: #FFF; 
 
    border: none; 
 
} 
 
.input-form.active{ 
 
    border-style: solid; 
 
    border-color: #006dcc; 
 
    border-width: 2px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 

 

 
<table id="tab" border=1 cellpadding=5px> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Email</th> 
 
     <th>Phone</th> \t 
 
     <th colspan="3">Actions</th> \t \t \t 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="user_name"> 
 
     <input type="text" class="input-form name-input" value="John Shepard"/> 
 
     </td> 
 
     <td class="user_email"> 
 
     <input type="mail" class="input-form mail-input" value="[email protected]"/> 
 
     </td> 
 
     <td class="user_phone">         
 
     <input type="text" class="input-form phone-input" value="202105"/> 
 
     </td> 
 
     <td> 
 
     <button class="read">Read</button> 
 
     <button class="edit">Edit</button> 
 
     <button class="del">Delete</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="user_name"> 
 
     <input type="text" class="input-form name-input" value="Aria T`Loak"/> 
 
     </td> 
 
     <td class="user_email"> 
 
     <input type="mail" class="input-form mail-input" value="[email protected]"/> 
 
     </td> 
 
     <td class="user_phone">         
 
     <input type="text" class="input-form phone-input" value="202105"/> 
 
     </td> 
 
     <td> 
 
     <button class="read">Read</button> 
 
     <button class="edit">Edit</button> 
 
     <button class="del">Delete</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="user_name"> 
 
     <input type="text" class="input-form name-input" value="Liara T`Soni"/> 
 
     </td> 
 
     <td class="user_email"> 
 
     <input type="mail" class="input-form mail-input" value="[email protected]"/> 
 
     </td> 
 
     <td class="user_phone">         
 
     <input type="text" class="input-form phone-input" value="405098"/> 
 
     </td> 
 
     <td> 
 
     <button class="read">Read</button> 
 
     <button class="edit">Edit</button> 
 
     <button class="del">Delete</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<div class="read_content"> 
 
    <label>Name:</label><span class="name"></span><br> 
 
    <label>Email:</label><span class="email"></span><br> 
 
    <label>Phone:</label><span class="phone"></span> 
 
</div>

2

я думаю, что это поможет. Вы должны идти бросить общую коллекцию с помощью петлевой .each

код

$('.edit').on('click', function(){ 
     $(this).closest('tr').find('td:lt(3)').toggleClass('ready'); 

     if ($(this).closest('tr').find('td:lt(3)').hasClass('ready')) {   
      $(this).html('Save'); 
      $(this).closest('tr').find('td:lt(3)').html('').append('<input class="vals" type="text">');  
     } 
     else{   
      $(this).closest('tr').find('td:lt(3)').each(function(i,v){ 
          $(this).html($('.vals').val()); 
         }) ; 
      $(this).html('Edit').removeClass('ready'); 
     }  
    }); 
Смежные вопросы