1. 首頁
  2. 問答
  3. 如何保存每個輸入值？

如何保存每個輸入值？

2015-10-13 96 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'); 
     }  
    }); 
});

什麼我真的要做的是，當我點擊編輯（文本更改保存）按鈕，每個TD元素的文字將被更改爲輸入所以它可以編輯每個字段（名稱，電子郵件，電話），當我再次點擊保存時，字段被更改，但只有第一個字段的文本，所以我如何使它保存每個不同的數據領域？

例如現在如果你鍵入
名：V
電子郵件：[email protected]
電話：32323

，當你點擊保存的所有字段將變更爲V，而不是不同的所有電子郵件和電話字段的數據。

來源

2015-10-13 MIle

回答

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

來源

2015-10-13 11:10:17

+0

做得好我正要建議OP使用id屬性爲每個字段並單獨檢索 –

+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>

來源

2015-10-13 11:27:14 Aroniaina

2

我認爲這將有助於。你必須使用一個。每個環路去扔的總集合

代碼

$('.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'); 
     }  
    });

來源

2015-10-13 12:16:40

相關問題

 相關問題