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メールのログイン入り口はどこですか？

7388

Java チュートリアル

1630

CakePHP チュートリアル

1357

Laravel チュートリアル

1267

PHP チュートリアル

1216

Related knowledge

GIMPでピクセルアートを作成する方法 Feb 19, 2024 pm 03:24 PM

この記事は、Windows でのピクセルアート作成に GIMP を使用することに興味がある場合に役立ちます。 GIMP は、無料でオープンソースであるだけでなく、美しい画像やデザインを簡単に作成できる有名なグラフィック編集ソフトウェアです。 GIMP は、初心者にもプロのデザイナーにも同様に適していることに加えて、描画と作成のための唯一の構成要素としてピクセルを利用するデジタルアートの形式であるピクセルアートの作成にも使用できます。 GIMP でピクセルアートを作成する方法 Windows PC で GIMP を使用してピクセルアートを作成する主な手順は次のとおりです。 GIMP をダウンロードしてインストールし、アプリケーションを起動します。新しいイメージを作成します。幅と高さのサイズを変更します。鉛筆ツールを選択します。ブラシの種類をピクセルに設定します。設定

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

Gree+ でファミリーを作成する方法 Mar 01, 2024 pm 12:40 PM

「Gree+ ソフトウェアでファミリーを作成する方法を知りたい」という友達がたくさんいました。操作方法は次のとおりです。詳しく知りたい友達は、一緒に見に来てください。まず、携帯電話で Gree+ ソフトウェアを開き、ログインします。次に、ページ下部のオプションバーで、右端の [My] オプションをクリックして、個人アカウントページに入ります。 2. マイページにアクセスすると、「ファミリー」の下に「ファミリーを作成」という項目があるので、それをクリックして入力します。 3. 次にファミリーを作成するページにジャンプし、表示に従って入力ボックスに設定するファミリー名を入力し、入力後右上の「保存」ボタンをクリックします。 4. 最後に、ページの下部に「正常に保存しました」というプロンプトが表示され、ファミリが正常に作成されたことが示されます。

Realme Phoneでフォルダーを作成するにはどうすればよいですか? Mar 23, 2024 pm 02:30 PM

タイトル: Realme Phone 初心者ガイド: Realme Phone でフォルダーを作成する方法?今日の社会において、携帯電話は人々の生活に欠かせないツールとなっています。人気のスマートフォンブランドとして、Realme Phone はそのシンプルで実用的なオペレーティングシステムでユーザーに愛されています。 Realme 携帯電話を使用する過程で、多くの人が携帯電話上のファイルやアプリケーションを整理する必要がある状況に遭遇する可能性があり、フォルダーを作成するのが効果的な方法です。この記事では、ユーザーが携帯電話のコンテンツをより適切に管理できるように、Realme 携帯電話にフォルダーを作成する方法を紹介します。いいえ。

iPhone 用の連絡先ポスターを作成する方法 Mar 02, 2024 am 11:30 AM

iOS17 では、Apple は一般的に使用される電話アプリと連絡先アプリに連絡先ポスター機能を追加しました。この機能を使用すると、ユーザーは連絡先ごとにパーソナライズされたポスターを設定できるため、アドレス帳がより視覚的で個人的なものになります。連絡先ポスターは、ユーザーが特定の連絡先をより迅速に識別して見つけるのに役立ち、ユーザーエクスペリエンスを向上させます。この機能により、ユーザーは自分の好みやニーズに応じて各連絡先に特定の写真やロゴを追加でき、アドレス帳のインターフェイスがより鮮明になり、iOS17 では Apple は iPhone ユーザーに自分自身を表現する新しい方法を提供し、パーソナライズ可能な連絡先ポスターを追加しました。連絡先ポスター機能を使用すると、他の iPhone ユーザーに電話をかけるときに、独自のパーソナライズされたコンテンツを表示できます。あなた

ハイチャートを使用してガントチャートを作成する方法 Dec 17, 2023 pm 07:23 PM

Highcharts を使用してガントチャートを作成する方法には、特定のコードサンプルが必要です。はじめに: ガントチャートは、プロジェクトの進捗状況や時間管理を表示するためによく使用されるチャート形式です。タスクの開始時刻、終了時刻、進捗状況を視覚的に表示できます。 Highcharts は、豊富なチャートタイプと柔軟な構成オプションを提供する強力な JavaScript チャートライブラリです。この記事では、Highcharts を使用してガントチャートを作成する方法と具体的なコード例を紹介します。 1. ハイチャート

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 は、強力で柔軟な Web アプリケーションフレームワークです。Python をベースにしており、Web アプリケーションの開発に必要な多くのツールと機能を提供します。この記事では、コマンドラインから最初の 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版

ホットトピック