버튼 텍스트를 클릭하여 입력 상자로 만들고, 저장을 클릭하여 텍스트로 바꾸는 효과를 얻는 방법.-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

버튼 텍스트를 클릭하여 입력 상자로 만들고, 저장을 클릭하여 텍스트로 바꾸는 효과를 얻는 방법.

php中世界最好的语言

Jan 23, 2018 am 10:47 AM

단추 문자 딸깍 하는 소리

이번에는 클릭 버튼의 텍스트를 입력 상자로 바꾸는 방법과 저장을 클릭하여 텍스트로 바꾸는 방법을 보여 드리겠습니다. 클릭 버튼의 텍스트를 바꾸는 효과를 구현하기 위한 주의 사항은 무엇입니까? 입력 상자에 넣고 저장을 클릭하면 텍스트로 변환됩니다. 이것은 실제 사례입니다. 살펴보겠습니다.

<!DOCTYPE html>  
<html lang="en">  
<head>  
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
　　<meta charset="utf-8">  
　　<title>点击按钮文字变成input框，点击保存变成文字</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">品名</th>  
　　　　　　　　<th width="200">件数</th>  
　　　　　　</tr>  
　　　　</thead>  
　　　　<tbody>  
　　　　　　<tr height="50">  
　　　　　　　　<td>iPhone6s</td>  
　　　　　　　　<td class="edit">2</td>  
　　　　　　</tr>  
　　　　　　<tr height="50">  
　　　　　　　　<td>小米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)">修改</button>  
　　　　　　　　</td>  
　　　　　　</tr>  
　　　　</tfoot>  
　　</table>  
  
<script type="text/javascript">  
function change(obj){   
　　var xg=$(obj).html();   
　　if(xg==&#39;修改&#39;){   
　　　　$(&#39;.edit&#39;).each(function(){   
　　　　　　var old=$(this).html();   
　　　　　　$(this).html("<input type=&#39;text&#39; name=&#39;editname&#39; class=&#39;text&#39; value="+old+" >");   
　　　　})   
　　　　$(obj).html(&#39;保存&#39;);   
　　}else if(xg==&#39;保存&#39;){   
　　　　$(&#39;input[name=editname]&#39;).each(function(){   
　　　　　　var old=$(this).html();   
　　　　　　var newfont=$(this).parent(&#39;td&#39;).parent(&#39;tr&#39;).children().find(&#39;input&#39;).val();   
　　　　　　$(this).parent(&#39;td&#39;).html(newfont);   
　　　　})   
　　　　$(obj).html(&#39;修改&#39;);   
　　}   
}   
</script>  
  
  
  
</body>  
</html>

로그인 후 복사

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7733

자바 튜토리얼

1643

Cakephp 튜토리얼

1397

라라벨 튜토리얼

1290

PHP 튜토리얼

1233

Related knowledge

Windows에서 배달 최적화 서비스를 비활성화하는 5가지 방법 May 17, 2023 am 09:31 AM

Windows 컴퓨터에서 배달 최적화 서비스를 비활성화하려는 데에는 여러 가지 이유가 있습니다. 그러나 독자들은 따라야 할 올바른 단계를 모른다고 불평합니다. 이 가이드에서는 몇 단계를 거쳐 배달 최적화 서비스를 비활성화하는 방법을 설명합니다. 서비스에 대해 자세히 알아보려면 services.msc를 여는 방법 가이드를 확인하세요. 배달 최적화 서비스는 무엇을 합니까? 배달 최적화 서비스는 클라우드 호스팅 솔루션을 갖춘 HTTP 다운로더입니다. 이를 통해 Windows 장치는 대체 소스에서 Windows 업데이트, 업그레이드, 응용 프로그램 및 기타 대용량 패키지 파일을 다운로드할 수 있습니다. 또한 배포 시 여러 장치에서 이러한 패키지를 다운로드할 수 있도록 하여 대역폭 소비를 줄이는 데 도움이 됩니다. 게다가 윈도는

PPT에서 둥근 그림과 텍스트를 만드는 방법 Mar 26, 2024 am 10:23 AM

먼저 PPT에 원을 그린 후 텍스트 상자를 삽입하고 텍스트 내용을 입력합니다. 마지막으로 텍스트 상자의 채우기와 윤곽선을 없음으로 설정하면 원형 그림과 텍스트 제작이 완료됩니다.

iPad Mini 6을 다시 시작하고 강제로 다시 시작하고 종료하는 방법 Apr 29, 2023 pm 12:19 PM

iPad Mini 6을 강제로 다시 시작하는 방법 iPad Mini 6 강제 다시 시작은 일련의 버튼을 눌러 수행되며 다음과 같이 작동합니다. 볼륨 높이기를 눌렀다 떼기 볼륨 낮추기를 눌렀다가 떼기 메시지가 나타날 때까지 전원/잠금 버튼을 눌렀다 놓습니다. iPad Mini가 강제로 다시 시작되었음을 나타내는 Apple 로고입니다. 이제 iPad Mini 6가 강제로 다시 시작되었습니다. 강제 다시 시작은 일반적으로 iPad Mini 정지, 앱 정지 또는 기타 일반적인 오작동과 같은 문제 해결 목적으로 사용됩니다. 6세대 iPad Mini를 강제로 다시 시작하는 절차에서 주의할 점은 초박형 베젤을 사용하는 다른 모든 장치에 적용된다는 것입니다.

다시 작성한 후: Windows 11에서 PS5 컨트롤러가 인식되지 않는 문제를 해결하는 방법 May 09, 2023 pm 10:16 PM

<h3>PS5 컨트롤러 연결에 대해 무엇을 알아야 합니까? </h3><p>DualSense 컨트롤러가 좋은 만큼 컨트롤러가 연결되지 않거나 감지되지 않는다는 보고가 있었습니다. 이 문제를 해결하는 가장 쉬운 방법은 적절한 USB 케이블을 사용하여 컨트롤러를 PC에 연결하는 것입니다. </p><p>일부 게임은 기본적으로 DualSense를 지원합니다. 이런 경우에는 컨트롤러를 연결하기만 하면 됩니다. 하지만 이는 USB 케이블이 없거나 사용하고 싶지 않은 경우와 같은 다른 질문을 제기합니다.

Word에서 텍스트에 점을 추가하는 방법은 무엇입니까? Mar 19, 2024 pm 08:04 PM

매일 Word 문서를 만들 때 문서의 특정 단어 아래에 점을 추가해야 하는 경우가 있습니다. 특히 시험 문제가 있는 경우에는 더욱 그렇습니다. 콘텐츠의 이 부분을 강조하기 위해 편집자는 Word에서 텍스트에 점을 추가하는 방법에 대한 팁을 공유할 것입니다. 도움이 되기를 바랍니다. 1. 빈 워드 문서를 엽니다. 2. 예를 들어 "텍스트에 점을 추가하는 방법"이라는 단어 아래에 점을 추가합니다. 3. 먼저 마우스 왼쪽 버튼으로 "텍스트에 점을 추가하는 방법"이라는 단어를 선택합니다. 나중에 해당 단어에 점을 추가하려면 먼저 마우스 왼쪽 버튼을 사용하여 원하는 단어를 선택해야 합니다. . 오늘 우리는 이 단어들에 점을 추가할 것이므로 여러 단어를 선택했습니다. 해당 단어를 선택하고 마우스 오른쪽 버튼을 클릭한 후 팝업 기능 상자에서 글꼴을 클릭합니다. 4. 그러면 이와 같은 것이 나타날 것입니다

iPhone iOS 17에서 여러 타이머를 설정하는 방법 Sep 18, 2023 am 09:01 AM

iOS 17에서는 시계 앱을 사용하여 iPhone에 여러 개의 타이머를 설정하거나 Siri를 사용하여 핸즈프리로 설정할 수 있습니다. 이 기사에서는 두 가지를 모두 논의합니다. 그것들을 살펴보자. 시계 앱을 사용하여 iPhone에서 여러 타이머 설정 iPhone에서 시계 앱을 열고 오른쪽 하단에 있는 타이머 탭을 탭하세요. 이제 시간, 분, 초를 설정하세요. "라벨" 및 "타이머 종료 시간" 옵션을 사용하여 타이머 이름과 타이머 완료 시 선호하는 신호음을 설정할 수 있습니다. 이렇게 하면 타이머를 구별하는 데 도움이 됩니다. 완료되면 "시작"버튼을 클릭하십시오. 그런 다음 오른쪽 상단에 있는 "+" 아이콘을 클릭하세요. 이제 위 단계를 반복하여 iPhone에 여러 타이머를 설정하세요. 탐색할 수도 있습니다.

Microsoft Edge 브라우저의 다운로드 기록을 지우는 방법은 무엇입니까? Apr 21, 2023 am 09:34 AM

<ul><li><strong> 다음 항목을 입력하려면 클릭하세요.</strong>ChatGPT 도구 플러그인 탐색</li></ul><h2>Edge에서 다운로드 기록 찾기 및 삭제< /h2> ;<p>다른 브라우저와 마찬가지로 Edge에도<strong>다운로드 기능이 있습니다.

Windows 11에서 전원 버튼 동작 변경 [5가지 팁] Sep 29, 2023 pm 11:29 PM

전원 버튼은 PC를 종료하는 것 이상의 기능을 수행할 수 있지만 이는 데스크톱 사용자의 기본 동작입니다. Windows 11에서 전원 버튼 동작을 변경하고 싶다면 생각보다 쉽습니다! 물리적 전원 버튼은 시작 메뉴의 버튼과 다르며 아래 변경 사항은 시작 메뉴의 작동에 영향을 미치지 않습니다. 또한 데스크톱인지 노트북인지에 따라 전원 옵션이 약간씩 다릅니다. Windows 11에서 전원 버튼 동작을 변경해야 하는 이유는 무엇입니까? 컴퓨터를 종료하는 것보다 더 자주 절전 모드로 전환하는 경우 하드웨어 전원 버튼(즉, PC의 물리적 전원 버튼) 작동 방식을 변경하면 문제가 해결됩니다. 절전 모드나 단순히 디스플레이를 끄는 경우에도 동일한 아이디어가 적용됩니다. 윈도우 11을 바꿔보세요

See all articles

버튼 텍스트를 클릭하여 입력 상자로 만들고, 저장을 클릭하여 텍스트로 바꾸는 효과를 얻는 방법.

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제