如何保存每个输入值？

时间：2015-10-13 10:56:19

标签： jquery

我在这里有一个关于我的问题的演示：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
电子邮件：v@v.com
电话：32323

当您点击保存时，所有字段都将更改为v，而不是所有电子邮件和电话字段的不同数据。

3 个答案:

答案 0 :(得分：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(){

	$('.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{		
            // OBSERVE THE CHANGE HERE	
			$(this).closest('tr').find('td:lt(3)').each(function(){
               $(this).html($(this).find(".vals").val());
            });
			$(this).html('Edit').removeClass('ready');
		}		
	});
});
.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{	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tab" border=1 cellpadding=5px>
		<thead>
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Phone</th>	
				<th colspan="3">Actions</th>			
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="user_name">John Shepard</td>
				<td class="user_email">Shepard@gmail.com</td>
				<td class="user_phone">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">Aria T`Loak</td>
				<td class="user_email">aria@gmail.com</td>
				<td class="user_phone">303102</td>
				<td>
					<button class="read">Read</button>
					<button class="edit">Edit</button>
					<button class="del">Delete</button>
				</td>
			</tr>
			<tr>
				<td class="user_name">Liara T`Soni</td>
				<td class="user_email">liara@gmail.com</td>
				<td class="user_phone">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>

也是一支笔，你需要它：http://codepen.io/anon/pen/wKqQJw

答案 1 :(得分：2)

我认为这会有所帮助。你可以使用a .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');
        }       
    });

答案 2 :(得分：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();		
    $('.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());		
  });

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

.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>	
      <th colspan="3">Actions</th>			
    </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="Shepard@gmail.com"/>
      </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="aria@gmail.com"/>
      </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="liara@gmail.com"/>
      </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>

相关问题
最新问题