Q&A
見にくいので、コードはコード専用のくくりがあるのでそこに入れてください
お世話になっております。
いま、html（jsp）の入力フォームからいろいろと情報を入力して、DBにインサートする、という機能（管理画面）を製造しています。
このとき、DBにインサートするレコード数が動的に変えられるよう、以下のjsで登録レコード数の増減ができるようにしています。
---以下javascript---
javascript:sample
1/** 2 * 行追加 3 */ 4function insertRow(tableId) { 5 // テーブル取得 6 var table = document.getElementById(tableId); 7 // 行を行末に追加 8 var row = table.insertRow(-1); 9 // セルの挿入 10 var buttonCell = row.insertCell(-1); 11 var Cell1 = row.insertCell(-1); 12 // ボタン用 HTML 13 var button = '<input type="button" value="削除" onclick="deleteRow(this)" class="btn"/>'; 14 var Cell1 = '<input type="text"/>'; 15 // 行数取得 16 var row_len = table.rows.length-1; 17 18 // セルの内容入力 19 buttonCell.innerHTML = button; 20 giftIdCell.innerHTML = Cell1; 21} 22 23/** 24 * 行削除 25 */ 26function deleteRow(obj) { 27 // 削除ボタンを押下された行を取得 28 tr = obj.parentNode.parentNode; 29 // trのインデックスを取得して行を削除する 30 tr.parentNode.deleteRow(tr.sectionRowIndex); 31}
---javascript終わり---
上のjsでは、サンプルとして1カラム分だけ（Cell1）のコードとなっていますが、実際は10ほどカラムがある状態です。
1レコードにつき1行としているので、カラム数が多くなるとどんどん画面右側へ領域を圧迫していき、収まりきらなくなるのは明らかなので、
ここで1レコードのテーブルを適当なところで2分割して、続きは次のテーブル（table1、table2と別のテーブルにして）に入力していくというようなやり方をしようとしています。
こうなった時、jsにある「行追加」及び「行削除」の機能も、1つにつき合計2行増減させる必要があります。
現在、「行追加」はできたのですが、「行削除」が実現できず困っています。
「行削除」のコメントにある通り、「削除ボタンを押下された行を取得」とそれに加えて別テーブルにある「削除ボタンを押下された行」の続きの行も消したいという事です。
やり方がほかにもありそうですが、js初心者の為なかなか行き詰っております。
説明が下手なので「なにがやりたいかわからん」といわれるかもしれないですが、
何がわからないかをわかるように回答したいと思っていますので、
何卒ご教示のほどよろしくお願い致します。
列なんですか行なんですか？
行は上から1,2,3と行くもので
列は左から1,2,3と行くものです
行という文字しか使っておりません通り、「行」です。
「右側へ領域を圧迫」と書かれていますがこれは？ ちなみにカラム数は一般的には「行数」です
1行につき1レコードなので、カラム数が増えると列数が増える、増えすぎると画面に収まらなくなる、という意味です。
これはミスです
回答2件
0
ベストアンサー
２つのテーブルの行数がまったく同じであれば、tr.sectionRowIndexで行数はとれているので
それぞれのテーブルにtable.deleteRow();してあげるだけで出来ます。
ただ、テーブルを２つにわけるよりも、スクロールエリアの中に入れて
ページ内で横スクロールさせたほうがすっきりしそうです。
やりたいことは、こういうことでしょうか？
html
1<html> 2<head> 3<style> 4table, tr, td { 5 border: 1px solid; 6 border-collapse: collapse; 7} 8</style> 9</head> 10<body> 11<table id="tbl_master"> 12</table> 13<br> 14<table id="tbl_dup"> 15</table> 16<script> 17var input_value = ""; 18 19/** 20 * 行追加 21 */ 22function insertRow(tableId) { 23 // テーブル取得 24 var table = document.getElementById(tableId); 25 // 行を行末に追加 26 var row = table.insertRow(-1); 27 // セルの挿入 28 var cellButton = row.insertCell(-1); 29 var inputCell1 = row.insertCell(-1); 30 // 行数取得 31 var row_len = table.rows.length-1; 32 33 // セルの内容入力 34 cellButton.innerHTML = '<input type="button" value="delete" onclick="deleteMultiRow(this)" class="btn"/>'; 35 inputCell1.innerHTML = '<input type="text" value="'+input_value+'" />'; 36} 37 38/** 39 * 行削除 40 */ 41function deleteRow(tableId, targetIdx) { 42 // trのインデックスを取得して行を削除する 43 var table = document.getElementById(tableId); 44 table.deleteRow(targetIdx); 45} 46 47function deleteMultiRow (obj) { 48 // 削除ボタンを押下された行を取得 49 tr = obj.parentNode.parentNode; 50 var targetIdx = tr.sectionRowIndex; 51 52 deleteRow("tbl_master", targetIdx); 53 deleteRow("tbl_dup", targetIdx); 54} 55 56for (i=0; i < 10; i++ ) { 57 input_value = "tbl_master-" + i; 58 insertRow("tbl_master"); 59 60 input_value = "tbl_dup-" + i; 61 insertRow("tbl_dup"); 62} 63</script> 64</body> 65</html>
投稿2016/03/24 10:06
総合スコア421
0
onclick="deleteRow(this)"
を
onclick="deleteRow('+table.rows.length+')"
にすれば消したい行のindex取れるのでは？
投稿2016/03/24 08:23
編集2016/03/24 08:29
総合スコア5572
あなたの回答
tips
プレビュー
