javascript_javascript 기술로 동적 양식을 만드는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

javascript_javascript 기술로 동적 양식을 만드는 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:49 PM

javascript 만들다 동적 형태

이 기사의 예에서는 JavaScript를 사용하여 동적 양식을 만드는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title></title>
<style>
#tab {
border:1px solid #aaa;
border-collapse:collapse;
width:80%;
}
#tab th{
border:1px solid #aaaaaa;
background:#ECE9D8;
border-collapse:collapse;
padding:5px;
text-align:left;
}
#tab td{
border:1px solid #d8d8d8;
border-collapse:collapse;
padding:5px;
}
.txt{
  border:1px solid #888;
background:#ECE9D8;
}
.checkBg{
border:1px solid #aaaaaa;
background:#ECE9D8;
}
.checkTxt{
border:1px solid #aaa;
background:##d8d8d8;
}
.button {
  border:1px solid #888;margin:5px 0px;
  width:80px;background:#ECE9D8;height:22px;line-height:22px;
}
</style>
  <script language="javascript" type="text/javascript">
  function $(id) {return document.getElementById(id);}
  function $F(name){return document.getElementsByTagName(name);}
function add(){
  var otr = document.getElementById("tab").insertRow(-1);
  var checkTd=document.createElement("td");
  checkTd.innerHTML = '<input type="checkbox" class="check" onclick="ccolor()" name="checkItem">';
  var otd1 = document.createElement("td");
  otd1.innerHTML = '<input type="text" class="txt" name="infoName_txt" id="infoName_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>';
  var otd2 = document.createElement("td");
  otd2.innerHTML = '<input type="text" class="txt" name="infoValue_txt" id="infoValue_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>';
  otr.appendChild(checkTd);
  otr.appendChild(otd1); 
  otr.appendChild(otd2); 
}
function ccolor()
{
  var c1 = document.getElementsByName('checkItem');
  for(var i=0; i<c1.length; i++)
  if(c1[i].checked)
  {
   c1[i].parentNode.parentNode.className="checkBg";
   c1[i].parentNode.nextSibling.firstChild.className="checkTxt";
   c1[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";
  }
  else { c1[i].parentNode.parentNode.className="";
  c1[i].parentNode.nextSibling.firstChild.className="";
   c1[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
}
function del(){
  var c = document.getElementsByName('checkItem');
  var idArray = new Array();
  for(var i=0; i<c.length; i++)
  if(c[i].checked)
  idArray.push(i);
  var rowIndex;
  var nextDiff =0;
  for(j=0;j< idArray.length;j++)
  {
  rowIndex = idArray[j]+1-nextDiff++;
  document.getElementById("tab").deleteRow(rowIndex);
  }
  }
function save(){
  var postString = $("postString");
   var checkboxs = document.getElementsByName("checkItem");
   var ttab = document.getElementsByName("infoName_txt");
   var tt2 = document.getElementsByName("infoValue_txt");
   var idArray = new Array();
   for(i=0;i<checkboxs.length;i++)
  {
   idArray.push(ttab[i].value + "|" + tt2[i].value); 
  }
   postString.value = idArray.join("-");
   alert(postString.value);
}
  function alldell()
  {
  var des =document.getElementsByName('checkItem');
  for(var i=0;i<des.length;i++)
  {
  if(des[i].checked=document.getElementById('delall').checked){
  des[i].parentNode.parentNode.className="checkBg";
  des[i].parentNode.nextSibling.firstChild.className="checkTxt";
  des[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";}
  else{ des[i].parentNode.parentNode.className="";
   des[i].parentNode.nextSibling.firstChild.className="";
   des[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
  }
  } 
</script>
</head>
<body>
<input name="addv_btn" id="addv_btn" type="button" class="button" onClick="add();" value="add" /> 
<input name="del_btn" id="del_btn" type="button" class="button" onClick="del();" value="del" /> 
<input name="save" id="save" type="button" class="button" onClick="save();" value="save" /><br>
<table id="tab" >
<tr>
<th width="5%"><input type="checkbox" id="delall" onclick="alldell()"></td>
<th width="40%">Name</td>
<th width="55%">value</td> 
</tr>
</table>
<p>
<input type="text" name="postString" id="postString"> 
</p>
</body>
</html>

로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

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

7338

자바 튜토리얼

1627

Cakephp 튜토리얼

1352

라라벨 튜토리얼

1265

PHP 튜토리얼

1210

Related knowledge

김프에서 픽셀 아트를 만드는 방법 Feb 19, 2024 pm 03:24 PM

Windows에서 픽셀 아트 제작을 위해 김프를 사용하는 데 관심이 있다면 이 기사가 흥미로울 것입니다. GIMP는 무료 오픈 소스일 뿐만 아니라 사용자가 아름다운 이미지와 디자인을 쉽게 만들 수 있도록 도와주는 잘 알려진 그래픽 편집 소프트웨어입니다. 초보자와 전문 디자이너 모두에게 적합할 뿐만 아니라, 김프는 그리기와 창작을 위한 유일한 구성 요소로 픽셀을 활용하는 디지털 아트의 한 형태인 픽셀 아트를 만드는 데에도 사용할 수 있습니다. 김프에서 픽셀 아트를 만드는 방법 Windows PC에서 김프를 사용하여 픽셀 그림을 만드는 주요 단계는 다음과 같습니다. 김프를 다운로드하여 설치한 다음 응용 프로그램을 시작합니다. 새 이미지를 만듭니다. 너비와 높이의 크기를 조정합니다. 연필 도구를 선택합니다. 브러시 유형을 픽셀로 설정합니다. 설정

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

Gree+로 가족을 만드는 방법 Mar 01, 2024 pm 12:40 PM

많은 친구들이 Gree+ 소프트웨어에서 가족을 만드는 방법을 알고 싶다고 말했습니다. 자세한 내용을 알고 싶은 친구들은 저와 함께 살펴보세요. 먼저 휴대폰에서 Gree+ 소프트웨어를 열고 로그인하세요. 그런 다음 페이지 하단의 옵션 표시줄에서 맨 오른쪽에 있는 "내" 옵션을 클릭하여 개인 계정 페이지로 들어갑니다. 2. 내 페이지에 접속한 후 "가족" 아래에 "가족 만들기" 옵션이 있습니다. 찾은 후 클릭하여 들어갑니다. 3. 다음으로 가족을 생성하는 페이지로 이동하여 프롬프트에 따라 입력 상자에 설정할 가족 이름을 입력하고 입력 후 오른쪽 상단의 "저장" 버튼을 클릭합니다. 4. 마지막으로 페이지 하단에 "저장 성공" 메시지가 나타나 패밀리가 성공적으로 생성되었음을 나타냅니다.

Highcharts를 사용하여 Gantt 차트를 만드는 방법 Dec 17, 2023 pm 07:23 PM

Highcharts를 사용하여 간트 차트를 만드는 방법에는 특정 코드 예제가 필요합니다. 소개: 간트 차트는 프로젝트 진행 상황 및 시간 관리를 표시하는 데 일반적으로 사용되는 차트 형식으로 작업의 시작 시간, 종료 시간 및 진행 상황을 시각적으로 표시할 수 있습니다. Highcharts는 풍부한 차트 유형과 유연한 구성 옵션을 제공하는 강력한 JavaScript 차트 라이브러리입니다. 이 기사에서는 Highcharts를 사용하여 Gantt 차트를 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 하이차트

iPhone용 연락처 포스터를 만드는 방법 Mar 02, 2024 am 11:30 AM

iOS17에서 Apple은 일반적으로 사용되는 전화 및 연락처 앱에 연락처 포스터 기능을 추가했습니다. 이 기능을 통해 사용자는 각 연락처에 대해 개인화된 포스터를 설정할 수 있어 주소록을 더욱 시각적이고 개인적으로 만들 수 있습니다. 연락처 포스터는 사용자가 특정 연락처를 더 빠르게 식별하고 찾는 데 도움이 되어 사용자 경험을 향상시킵니다. 이 기능을 통해 사용자는 자신의 선호도와 요구 사항에 따라 각 연락처에 특정 사진이나 로고를 추가할 수 있어 주소록 인터페이스가 더욱 생생해집니다. iOS17의 Apple은 iPhone 사용자에게 자신을 표현하는 새로운 방법을 제공하고 개인화 가능한 연락처 포스터를 추가했습니다. 연락처 포스터 기능을 사용하면 다른 iPhone 사용자에게 전화할 때 고유하고 개인화된 콘텐츠를 표시할 수 있습니다. 너

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

Django 첫 번째 살펴보기: 명령줄을 사용하여 첫 번째 Django 프로젝트 만들기 Feb 19, 2024 am 09:56 AM

Django 프로젝트 여정을 시작하세요. 명령줄에서 시작하여 첫 번째 Django 프로젝트를 만드세요. Django는 Python을 기반으로 하며 웹 애플리케이션 개발에 필요한 많은 도구와 기능을 제공합니다. 이 문서에서는 명령줄에서 시작하여 첫 번째 Django 프로젝트를 만드는 방법을 안내합니다. 시작하기 전에 Python과 Django가 설치되어 있는지 확인하세요. 1단계: 프로젝트 디렉터리 생성 먼저 명령줄 창을 열고 새 디렉터리를 생성합니다.

See all articles

javascript_javascript 기술로 동적 양식을 만드는 방법

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제