ウォッチ
いつもお世話になっております。
現在私は、入力フォームに入力した情報をテーブルに表示し、それをチェックボックスで選択して削除する機能を作成しております。
現在、テーブルに表示するところまでは出来たのですが、チェックボックスを作成して削除するところがまだ出来ていません。
自分なりに本や、ネットで調べてみたのですが分かりませんでした。
お手数ですがどなたかご教授よろしく御願い致します。
p.s.チェックボックスは、入力フォームの情報を追加した際に、表示される情報と一緒に追加したいです。
少しでも参考になればと思い、作成の完成図として、画像を作成させていただきました。
<!DOCTYPE html>
<html>
<head>
<title>勉強</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/test.css" type="text/css" />
<link rel="stylesheet" href="js/test.js" type="text/javascript" />
<script type="text/javascript">
function appendToTable() {
var $formObject = document.getElementById( "sampleForm" );
var $tableObject = document.getElementById( "sampleTable" );
var $tr = "<tr>";
$tr += "<td>" + $formObject.formName.value + "</td>";
$tr += "<td>" + $formObject.formMail.value + "</td>";
$tr += "<td>" + $formObject.formTel.value + "</td>";
$tr += "<td>" + $formObject.formSex.value + "</td>";
$tr += "<td>" + $formObject.formYear.value + "</td>";
$tr += "<td>" + $formObject.formMonth.value + "</td>";
$tr += "<td>" + $formObject.formDay.value + "</td>";
$tr += "</tr>";
$tableObject.insertAdjacentHTML( "beforeend", $tr );
}
</script>
</head>
<body>
<div id="wrapSampleForm">
<form id="sampleForm" name="form1">
【入力エリア】
<br />
名前：<input type="text" name="formName">
<br />
メールアドレス：<input type="text" name="formMail">
<br />
電話番号：<input type="text" name="formTel">
<br />
性別：<input type="radio" name="formSex" value="男性" checked="checked" /><label for="sex1" >男性</label>
<input type="radio" name="formSex" value="女性" /><label for="sex2">女性</label>
<br />
生年月日：<select name="formYear">
<option value="">--</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>年
<select name="formMonth">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="formDay">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>日<br />
</form>
<button onclick="appendToTable()" onSubmit="return chValie()">追加</button>
</div>
<table id="sampleTable">
<tr>
<th id="tableName">名前</th>
<th id="tableMail">メールアドレス</th>
<th id="tableTel">電話番号</th>
<th id="tableSex">性別</th>
<th id="tableYear">生年</th>
<th id="tableMonth">月</th>
<th id="tableDay">日</th>
</tr>
</table>
</body>
</html>
No.3ベストアンサー
- 回答日時：
なるほど、IEでは「remove()」は使えないんですね。
Chromeを使っていたので・・・。
一応これで動作します。
function removeToTable() {
var $tableObject = document.getElementById( "sampleTable" );
var elms = document.getElementsByName("delchk");
var len = elms.length;
for(var i = len - 1; i >= 0; i--) {
if(elms[i].checked) {
$tableObject.removeChild(document.getElementById("addTbl" + elms[i].id));
}
}
}
-
-
- 1
- 件
-
2度もご解答していただきありがとうございます！無事に起動することが出来ました！
あともう一つお伺いしたいのですが、ラジオボタンの値がundefinedになってしまいますが、解決策はありますでしょうか？
何度も申し訳ございません・・・。
No.2
- 回答日時：
こんな感じでどうでしょう？
<script type="text/javascript">
var num = 0;
function appendToTable() {
++num;
var $formObject = document.getElementById( "sampleForm" );
var $tableObject = document.getElementById( "sampleTable" );
var $tr = "<tbody id='addTbl" + num + "'><tr>";
$tr += "<td>" + $formObject.formName.value + "</td>";
$tr += "<td>" + $formObject.formMail.value + "</td>";
$tr += "<td>" + $formObject.formTel.value + "</td>";
$tr += "<td>" + $formObject.formSex.value + "</td>";
$tr += "<td>" + $formObject.formYear.value + "</td>";
$tr += "<td>" + $formObject.formMonth.value + "</td>";
$tr += "<td>" + $formObject.formDay.value + "</td>";
$tr += "<td><input name='delchk' type='checkbox' id='" + num + "'></td>";
$tr += "</tr></tbody>";
$tableObject.insertAdjacentHTML( "beforeend", $tr );
}
function removeToTable() {
var elms = document.getElementsByName("delchk");
var len = elms.length;
for(var i = len - 1; i >= 0; i--) {
if(elms[i].checked) {
document.getElementById("addTbl" + elms[i].id).remove();
}
}
}
</script>
<table id="sampleTable">
<thead>
<tr>
<th id="tableName">名前</th>
<th id="tableMail">メールアドレス</th>
<th id="tableTel">電話番号</th>
<th id="tableSex">性別</th>
<th id="tableYear">生年</th>
<th id="tableMonth">月</th>
<th id="tableDay">日</th>
<th id="tableDay"><input type="button" onclick="removeToTable()" value="削除"></th>
</tr>
</thead>
</table>
-
-
- 0
- 件
-
ご解答ありがとうございます。
早速試してみたのですが、checkboxは追加することが出来たのですが、削除が出来ませんでした。
わざわざありがとうございました！
No.1
- 回答日時：
こんな感じ？
<script>
try{
document.addEventListener ("click",function(e){myfunc(e)},true);
}catch(e){
document.attachEvent('onclick',function(e){myfunc(e)});
}
function myfunc(e)
{
var t = (e.srcElement || e.target);
if(t.type=="button" && t.value=="追加") appendToTable();
if(t.type=="button" && t.value=="削除") removeFromTable();
}
function removeFromTable()
{
var t = document.getElementById( "sampleTable" ).getElementsByTagName("tbody")[0];
var ele = t.getElementsByTagName("input");
for(var i=ele.length -1;i>=0;i--){
if(ele[i].type=="checkbox" && ele[i].name=="del" && ele[i].checked==true){
var p=ele[i];
while(p=p.parentNode){
if(p.nodeName=="TR"){
p.parentNode.removeChild(p);
break;
}
}
}
}
}
function appendToTable()
{
var f = document.getElementById( "sampleForm" );
var eles=["formName","formMail","formTel","formSex","formYear","formMonth","formDay"];
var t = document.getElementById( "sampleTable" ).getElementsByTagName("tbody")[0];
var tr=document.createElement("tr");
for(var i=0;i<eles.length;i++){
var td=document.createElement("td");
var fe=f.elements[eles[i]];
var v="";
if(typeof fe.length=="number"){
for(var j=0;j<fe.length;j++){
if(fe[j].type=="radio" && fe[j].checked){
v=fe[j].value;
break;
}
}
}else{
v=fe.value;
}
td.appendChild(document.createTextNode(v));
tr.appendChild(td);
}
var td=document.createElement("td");
var cb=document.createElement("input");
cb.setAttribute("type","checkbox");
cb.setAttribute("name","del");
td.appendChild(cb);
tr.appendChild(td);
t.appendChild(tr);
}
</script>
<form id="sampleForm" name="form1">
【入力エリア】<br>
名前：<input type="text" name="formName"><br>
メールアドレス：<input type="text" name="formMail"><br>
電話番号：<input type="text" name="formTel"><br>
性別：<input type="radio" name="formSex" value="男性" checked="checked" id="sex1"><label for="sex1" >男性</label>
<input type="radio" name="formSex" value="女性" id="sex2"><label for="sex2">女性</label><br>
生年月日：<select name="formYear">
<option value="">--</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>年
<select name="formMonth">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="formDay">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>日<br>
</form>
<input type="button" value="追加">
<table id="sampleTable">
<tr>
<th id="tableName">名前</th>
<th id="tableMail">メールアドレス</th>
<th id="tableTel">電話番号</th>
<th id="tableSex">性別</th>
<th id="tableYear">生年</th>
<th id="tableMonth">月</th>
<th id="tableDay">日</th>
<th><input type="button" value="削除"></th>
</tr>
</table>
-
-
- 0
- 件
-
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。～運賃検索プログラムを完成させたい～ 1 2022/07/22 11:10
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
連動するプルダウンリストの作成
-
return falseが効かない
-
selectを変更不可にしたい
-
webページの一部のみの更新につ...
-
リストボックス内の重複したも...
-
<input>の選択肢をプルダウンメ...
-
サイト内の物件を複数の検索条...
-
selectボックスの選択結果を変...
-
JavaScriptの質問です。どなた...
-
二つのセレクトボックス間での...
-
プルダウンメニューに連動する...
-
セレクトボックスで選択した音...
-
数によってボタンを有効化したい
-
JSONデータをフォームにセット...
-
javascriptでセレクトボックス...
-
プルダウンからリンクをthicbox...
-
同じ物を３つ配置したいのですが
-
ＶＢ6でＷＥＢのラジオボタンの...
-
Selectボックスの要素入力を省...
-
JavaScripsのDOMについてなんで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<input>の選択肢をプルダウンメ...
-
プルダウン選択を変更すると、...
-
javascriptでセレクトボックス...
-
スマホのフォームでのselect複...
-
二つのセレクトボックス間での...
-
全てのselect要素をデフォルト...
-
同じ名前のセレクトがある場合...
-
JavaScriptで<select>の<option...
-
ラジオボタンの値が取得できな...
-
<select> をmultiple にしてい...
-
Selectボックスの一覧表示方法
-
プルダウンの値によって活性・...
-
selectで選ばれた値を別ページ...
-
プルダウンのoptionの表示・非...
-
【JavaScript】プルダウンで数...
-
Selectボックスの要素入力を省...
-
javascriptでセルを矩形で選択する
-
セレクトボックスを2つ選択して...
-
return falseが効かない
-
IDをvalueの値でなく、class名...
おすすめ情報
