• ベストアンサー

テーブルの最後の行であるか判別したい

テーブルの中にあるテキストボックスのonchangeイベントの中で、このテキストボックスが最後の行(<tr>レベル)であることを知るにはどうすればいいでしょうか? <table> <tr><td><input type="text" onchange="islastline()"></td></tr> <tr><td><input type="text" onchange="islastline()"></td></tr> <tr><td><input type="text" onchange="islastline()"></td></tr> </table> この場合一番下のテキストボックスに入力したときだけTRUEを返してほしいのです。

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.3

#1です。 ちょっとまずかったので訂正。(thisを渡すのは同じ) function islastline(obj){ var Tr = obj.parentNode.parentNode; var Table = Tr.parentNode.parentNode; return (Table.rows.length == Tr.rowIndex +1); }

sinkan
質問者

お礼

素早い回答ありがとうございました。 実はinnerHTMLでtableの行を増やそうとしたのですが、試行錯誤の結果tableにinnerHTMLを適用できないことがわかり、dlで代用しました。 そのため結果的には#1の方法を使わせていただきました。 また#1、#3の方法を元にNodeの概念などを学び非常に勉強になりました。

その他の回答 (2)

  • kokorone
  • ベストアンサー率38% (417/1093)
回答No.2

最下行は、islastline(1)、その他は、islastline(0)としては駄目なのですか?

sinkan
質問者

お礼

静的なHTMLページならこれで充分だったのですが、動的に変化するページであったためなかなか難解でした。 最初の説明が不足だったかもしれませんね、申し訳ありません。

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

とりあえずthisを渡すように変更して。 <tr><td><input type="text" onchange="islastline(this)"></td></tr> <tr><td><input type="text" onchange="islastline(this)"></td></tr> <tr><td><input type="text" onchange="islastline(this)"></td></tr> function islastline(obj){ if(obj.parentNode.panrentNode.nextSibling){ // inputの親(td)の親(tr)のnextSibling(次のtr)がnullでなければ最終行ではない。 return false; } else { return true; } }

関連するQ&A

  • TABLEの特定の行にスクロールバーをつけたい

    横に5個、縦に100個のテキストボックスを用意し、上下に切ったフレームの下画面に表示させ、入力していくページを作っています。 このテキストボックスを5×100のテーブルにしているのですが、 最初の1行を入力項目名に、下から3行ほどを入力値計算結果にしているため、 間の2~97行だけをスクロールさせたいと考えています。 特定の行だけスクロールバーをつけるということはHTMLでできるのでしょうか。 以下ソースです。 <% dim i i=0 %> <table border=1> <tr> <td width=70 align=center bgcolor="#e6e6fa">A</td> <td width=200 align=center bgcolor="#e6e6fa">B</td> <td align=center bgcolor="#e6e6fa">C</td> <td align=center bgcolor="#e6e6fa">D</td> <td align=center bgcolor="#e6e6fa">E</td> </tr> <% do while i<=99 %> <tr> <td align=center><input type="text" maxlength=6></td> <td align=center><input type="text"></td> <td align=center><input type="text"></td> <td align=center width=40><input type="text"></td> <td align=center width=40><input type="text"></td> </tr> <% i=i+1 loop %> <tr> <td rowspan="3" colspan="3"></td> <td align=center bgcolor="#e6e6fa">結果(1)</td> <td align=center><input type="text"></td> </tr> <tr> <td align=center bgcolor="#e6e6fa">結果(2)</td> <td align=center><input type="text"></td> </tr> <tr> <td align=center bgcolor="#e6e6fa">結果(3)</td> <td align=center><input type="text"></td> </tr> </table> このループ間のテーブル行にスクロールバーをつけたいのです。 長々とすみません。 どなたかご存知の方、お願いします・・・。

  • テーブル行のクリックでチェックボックスの制御

    テーブル行をクリックしたときにその行にあるチェックボックスのON/OFFを 制御したいと思います。 Jqueryで以下サンプルを作成してみました。該当行をクリックするとチェックボックスが ONになったりOFFになったりするのですがチェックボックス自体をクリックするとうまく チェックがONになりません。恐らくチェックボックスをクリックした時はONになっていて、 同時に行をクリックしたとみなされONになっているチェックボックスをOFFにしているのでは ないかと思われます。 チェックボックスをクリックしてもON/OFFがうまくいくようにするためにはどうすればよろしいでしょうか 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#nameTable tr").click(function() { //alert($(data).find(":checkbox").val()); var chk = $(this).find(":checkbox"); if(chk.prop("checked")) { chk.attr("checked", false); } else { chk.attr("checked", true); } }); }); </script> <title>CSS</title> <style type="text/css"> </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <table id="nameTable" border="1"> <tr><th>名前</th><th>チェックボックス</th></tr> <tr><td>あいうえお</td><td><input type="checkbox" value="1"></td></tr> <tr><td>かきくけこ</td><td><input type="checkbox" value="2"></td></tr> <tr><td>さしすせそ</td><td><input type="checkbox" value="3"></td></tr> <tr><td>たちつてと</td><td><input type="checkbox" value="4"></td></tr> <tr><td>なにぬねの</td><td><input type="checkbox" value="5"></td></tr> </table> </body> </html>

  • HTMLでテーブルを作成した際、テーブル間にスペースが空いてしまいます

    HTMLでテーブルを作成した際、テーブル間にスペースが空いてしまいます。 スタイルシートを使用/使用せず、いずれの場合も変わりません。 会社のPCで表示した時になり、家ですると自動的に詰めて表示されるみたいです。 コードはいたってシンプルで・・・ <html><head><title>aaa</title> </head> <body> aaa <hr> <table border=1> <tr><td>名前</td><td><input type="text" name="name"></td></tr> </table> <table border=1> <tr><td>名前</td><td><input type="text" name="name"></td></tr> <tr><td>名前</td><td><input type="text" name="name"></td></tr></table> <table border=1> <tr><td>名前</td><td><input type="text" name="name"></td></tr> <tr><td>名前</td><td><input type="text" name="name"></td></tr> <tr><td>名前</td><td><input type="text" name="name"></td></tr> <tr><td>名前</td><td><input type="text" name="name"></td></tr> </table> </body> </html> 守秘義務があるので、今は中身を適当に書いてますが、書き方はこんな感じです。 スタイルシートやHTMLコードなど色々調べましたが、テーブルの中の文字などを 詰めたりする方法は載ってましたが、今の私の知識ではテーブル自体は左右にしか動けません。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • テーブルの行削除について

    以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加・削除</TITLE> </HEAD> <BODY> <TABLE BORDER="1" id="Table1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TR> </TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <INPUT TYPE="button" VALUE="行削除"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1"); } var tr = document.createElement("tr"); var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","18"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","Cn"); tx1.setAttribute("value",""); td1.appendChild(tx1); var td2 = document.createElement("td"); var tx2 = document.createElement("input"); tx2.setAttribute("type","text"); tx2.setAttribute("size","18"); tx2.setAttribute("maxlength","18"); tx2.setAttribute("name","Cn"); tx2.setAttribute("value",""); td2.appendChild(tx2); tr.appendChild(td1); tr.appendChild(td2); tbl.appendChild(tr); } </script> </BODY> </HTML>

  • 追加ボタンでテーブルの行を追加する

    情報登録する画面で既存テーブル(可変のテーブルにしたい)に 情報を追加するのに「追加ボタン」を押すと新規の行が追加されるように したいのですが、どのようにすればいいのでしょうか? テストで以下のようにHTMLを書いているのに対して いい方法を教えてください。 ーーーーーーーーーーーーーーーー <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加</TITLE> </HEAD> <BODY> <TABLE BORDER="1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD>><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""><//TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TABLE> <INPUT TYPE="button" VALUE="行追加"> </CENTER> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • テーブル内いっぱいに

    comment: と txt box を配置したいのですが txt box が右側に小さく表示されます どうしたらいいでしょうか? <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr><td> <table width="100%" cellspacing="0" cellpadding="0"> <tr><td>comment:</td><td><input type="text" style="width:100%"/></td></tr> </table> </td></tr> </table>

    • ベストアンサー
    • HTML
  • テーブルの行操作について

    下記のJavaScriptの操作で質問があります。 ボタンを押すたびに1行目が最後に追加されていくと考えたのですが、 実際の動作では1行目が複製されず、行の入れ替えになってしまいます。 cloneNodeすれば行の追加になるのはわかりますが、なぜ下記の操作で行の入れ替えになるのでしょうか? <html> <head> <title>テーブルテスト</title> <script type="text/javascript"> <!-- function testFunction() { tableBody.appendChild(tableBody.childNodes(0)); } --> </script> </head> <body> <table border="1"> <thead> <tr><th>A</th><th>B</th><th>C</th></tr> </thead> <tbody id="tableBody"> <tr><td>foo</td><td>bar</td><td>hoge</td></tr> <tr><td>abc</td><td>def</td><td>ghij</td></tr> </tbody> </table> <input type="button" value="テスト" onclick="testFunction()" /> </body> </html>

  • ボタンクリックでフォーカス移動

    JavaScript超ビギナーなので方法がよくわかりません。 フォームにテキストボックス(配列)4個あり ボタンを押すたびに未記入のテキストボックスにカーソルを移動したいのですが。どのようにしたらいいでしょうか。 <form name="form1" method="post"> <table width="200" border="1"> <tr><td ><input type="submit" name="Submit" value="送信"></td></tr> <tr><td ><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> </table> </form>

  • ボタンを押してテキストボックスを追加しテーブルの作成

    avascriptでテキストボックスを追加したいのです。テーブルを組んで複数のnamaの違うボックスを追加したいです。 下記のようにイメージして書いたのですが、考えが詰まりました。 テーブルでなくても、2列複数行の形になればいいんですが・・・ 教えて下さい。よろしくお願いします。 <script type="text/javascript"> <!-- var tag_num = 4; function myAdd(){ var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", "hoge" + tag_num++); oTag.setAttribute("name", "fuga" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } --> </script> </head> <body> <form id="form1" action="check.php" method="post"> <span id="area"> <table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td><input type="text" name="hoge1" value=""></td> <td><input type="text" name="fuga1" value=""></td> </tr> <tr> <td><input type="text" name="hoge2" value=""></td> <td><input type="text" name="fuga2" value=""></td> </tr> <tr> <td><input type="text" name="hoge3" value=""></td> <td><input type="text" name="fuga3" value=""></td> </tr> </tbody> </table> </span> <input type="button" value="Add" onClick="myAdd()"> </form>

  • HTMLでテーブルの並び替え

    HTMLでテーブルの並び替えで質問です。 以下テーブルの1行目各項目名をクリックすると対象列の昇順、さらにクリックで降順、再度クリックで昇順が行いたいと思っております。 <form name="nForm"> <table> <thead> <tr><th>項目A</th><th>項目B</th><th>項目C</th></tr> </thead> <tbody> <tr><td>20</td><td>い</td><td><input type="text" id="TX[0]" name="TX[0]" value="20"></td></tr> <tr><td>30</td><td>あ</td><td><input type="text" id="TX[1]" name="TX[1]" value="50"></td></tr> <tr><td>10</td><td>お</td><td><input type="text" id="TX[2]" name="TX[2]" value="30"></td></tr> <tr><td>55</td><td>え</td><td><input type="text" id="TX[3]" name="TX[3]" value="10"></td></tr> <tr><td>90</td><td>う</td><td><input type="text" id="TX[4]" name="TX[4]" value="15"></td></tr> </tbody> </table> </form> いくつかの方法を試してみたのですが思った結果が出ない為お知恵をお借りできないでしょうか? http://jsajax.com/Articles/jQueryTableSorter/1120 の方法は試行してみましたがテキストフィールドの並び替えがnameの値で並び替えが掛ります。 value(変動値)での並び替えを行うことが必要です。

    • ベストアンサー
    • HTML

専門家に質問してみよう