Click the button to turn the text into an input box, click Save to turn it into text implementation code

Click the button to turn the text into an input box, click Save to turn it into text implementation code

XML/HTML CodeCopy content to clipboard

<!DOCTYPE html >
< html lang = "en" >
< head >
　　< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
　　< meta charset = "utf-8" >
　　< title > Click the button to turn the text into an input box, click Save to turn it into text </ title >
　　< style type = "text/css" >
table{ text-align: center; font-size: 14px;}
table > thead > tr > th{ font-weight: normal;}
.text-right{ padding-right:73px; text-align: right;}
.text{ width: 50px; height: 30px; border: 1px solid #ddd; text-align: center;}
　　</ style >
　　< script type = "text/javascript" src = "js/jquery.min.js" > </ script >
</ head >
< body >
　　< table >
　　　　< thead >
　　　　　　< tr >
　　　　　　　　< th width = "400" > Product Name </ th >
　　　　　　　　< th width = "200" > Number of items </ th >
　　　　　　</ tr >
　　　　</ thead >
　　　　< tbody >
　　　　　　< tr height = "50" >
　　　　　　　　< td > iPhone 6s </ td >
　　　　　　　　< td class = "edit" > 2 </ td >
　　　　　　</ tr >
　　　　　　< tr height = "50" >
　　　　　　　　< td > Xiaomi 5 </ td >
　　　　　　　　< td class = "edit" > 5 </ td >
　　　　　　</ tr >
　　　　</ tbody >
　　　　< tfoot >
　　　　　　< tr >
　　　　　　　　< td colspan = "2" class = "text-right" >
　　　　　　　　　　< button type = "button" class = "btn" onclick = " change (this)" > Change </button>
　　　　　　　　</ td >
　　　　　　</ tr >
　　　　</ tfoot >
　　</ table >
< script type = "text/javascript" >
function change(obj){
var xg =$(obj).html();
if( xg == 'modify'){
$('.edit').each(function(){
var old =$(this).html();
$(this).html(" < input type = 'text' name = 'editname' class = 'text' value = "+old+" > ");
})
$(obj).html('save');
}else if( xg == 'save'){
$('input[ name = editname ]').each(function(){
var old =$(this).html();
var newfont =$(this).parent('td').parent('tr').children().find('input').val();
$(this).parent('td').html(newfont);
})
$(obj).html('modify');
}
}
</ script >
</ body >
</ html >

The above implementation code of clicking a button to turn text into an input box and clicking Save to turn it into text is all the content that the editor shares with you. I hope it can give you a reference and I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/yuxiaoqi912/p/5470354.html

<<: Vue+ECharts realizes the drawing of China map and automatic rotation and highlighting of provinces

>>: mysql calculation function details