<table border="0" id="tbl1">
<tr>
<th>A1</td>
<th>B1</td>
<th colspan="2">C1</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
</table>
というテーブルで、C1列(要はデータcccとdddの2列)を表示/非表示を行いたいです。
調べてみたところ、colspanが設定されている例がありませんでした。

お判りになる方、よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (11件中1~10件)

rowSpan が、からむとてーぶるのてんかいが、ちょうめんどう!


いじでも といてやろうと かんがえたあげく、こんなのが・・・
上級者の方の解法をお願いします。

<button onClick="test('tbl1','list1')">隠す</button>
<table border="1" cellpadding="2" cellspacing="1" id="tbl1">
<tr>
<th rowspan="3">AAA</th>
<th colspan="3" id="list1">BBB</th>
</tr>
<tr>
<th width="120">BBB1</th>
<th width="120">BBB2</th>
<th width="120">BBB3</th>
</tr>
<tr>
<th>BBB11</th>
<th>BBB21</th>
<th>BBB31</th>
</tr>
<tr>
<td>aaa</td>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb1</td>
<td>bbb2</td>
<td>bbb3</td>
</tr>
<tr>
<td>ccc</td>
<td>ccc1</td>
<td>ccc2</td>
<td>ccc3</td>
</tr>
</table>

<script type="text/javascript">
<!--
function test(tableID, targetID) {

 var tr = document.getElementById(tableID).rows;
 var eTgt = document.getElementById(targetID);
 var x1 = eTgt.offsetLeft;
 var x2 = x1 + eTgt.offsetWidth;
 var d = [];
 var o1, o2;
 var c1 = 0, c2, c3 = 0;
 
 while (o1 = tr[c1++]) {
  c2 = 0;
  while (o2 = o1.cells[c2++])
   if (x1 <= o2.offsetLeft && o2.offsetLeft < x2) d.push(o2);
 }
 while (o1 = d[c3++]) o1.style.display = 'none';
}
//-->
</script>
    • good
    • 1
この回答へのお礼

長々お付き合いくださり、ありがとうございました。
ようやく所望のものが出来上がりました。

お礼日時:2009/05/23 10:40

test('てーぶるのID',1,3);


ではだめってことでしょ?
    • good
    • 0

しつもん。


「れつをけす」がただしいの?
「とくていのせるをかくす」がただしいの?
「ひょうのどこであれ、していしたIDのあるれつすべてをけす」?

にほんごむずかしいからさぁ。ばぶ。

この回答への補足

すみません。スレを変えて画像で表示します。

補足日時:2009/05/21 15:09
    • good
    • 0

おおきいゆめをかたられたら、どうしよう?とおもったけど。

ばぶ。

function hide() {
 var c = 0, o, e;
 while (o = arguments[c++]) (e = document.getElementById(o)) && (e.style.visibility = 'hidden');
}
    • good
    • 0

ぶちっ。



れいせいに×2>じぶん

ikeike77さんへ
ようぼうというか、仕様はほかにないのかなぁ~。ばぶぅ~

ゆめはおおきくかたっておいたほうがよいぞ!ばぶぅ。

この回答への補足

ごめんなさいm(__)m
回答No.3に補足説明したのですが、rowspan、colspan混在したテーブルで、
childNodesとかの知識もおぼろげで。。。
要はテーブル中の特定のIDを付けた列だけを非表示にしたいのです。

補足日時:2009/05/21 13:57
    • good
    • 0

babu_babooさんの方法が一番スマートですね。



tableの場合、childNodesを使わなくても rows, cells という便利なプロパティがあるようです。

Document Object Model/TABLE
http://homepage3.nifty.com/aya_js/dom/dom03.htm

# あとは、Firebugでいろいろコードをたたけば解決できるんじゃないでしょうか。
    • good
    • 0

れんとう、ごめん。


colSpan には、0のときもあるらしいので、そのときは・・・
やっぱり while がみじかいじょ

function test(tableID, sRow, eRow, vFlag) {
 var t = document.getElementById(tableID);
 var tr;
 var cIdx;
 var obj;
 var disp = /*@if(@v<8) 'inline' @else@*/ 'table-cell' /*@end@*/;
 var i = 0, j;
 
 while (tr = t.rows[i++]) {
  cIdx = j = 0;
  while (obj = tr.cells[j++]) {
   sRow <= cIdx && cIdx <= eRow && (obj.style.display = vFlag ? disp: 'none');
   cIdx += obj.colSpan;
  }
 }
}
    • good
    • 0

ていせいします


(@v<8)
でした。
    • good
    • 0

ひょうのせるには、.colSpanってのがあるじょ!


それをかうんとしてはんだんしてる。
style.display は、tabel-cell と inline とがあるじょ
めんどうなので rowSpan は、する~しちゃった
ばぶぅ。

//@cc_on @set @v = @_jscript_version;
function test(tableID, sRow, eRow, vFlag) {
 var t = document.getElementById(tableID);
 var rMax = t.rows.length;
 var cMax;
 var tr;
 var cIdx;
 var obj;
 var disp = /*@if(@v>=8) 'inline' @else@*/ 'table-cell' /*@end@*/;
 
 for (var i = 0; i < rMax; i++) {
  tr = t.rows[i];
  cMax = tr.cells.length;
  cIdx = 0;
  for (var j = 0; j < cMax; j++) {
   obj = tr.cells[j];
   if (sRow <= cIdx && cIdx <= eRow) {
    obj.style.display = vFlag ? disp: 'none';
   }
   cIdx += obj.colSpan;
  }
 }
}
alert('消す');
test('tbl1', 2,3);
alert('見せる');
test('tbl1', 2,3,true);

この回答への補足

申し訳ありません。皆様を混乱させてしまって・・・

やりたい事は、AAAの列だけ常に表示させておき、BBB(つまり3列分)を表示/非表示になる・・といった事です。
下のHTMLで、変数bbbには「3」が入っているのは確認できましたが、後がさっぱり続きません。

どうぞよろしくお願いいたします。



<html>
<head>
<script type="text/javascript">
<!--
function hide(idName) {
var aaa = document.getElementById(idName).childNodes;
var bbb = aaa[0].length;
alert(bbb);
//-->
</script>
</head>

<body>
<button onClick="hide('list1')">隠す</button>
<table border="1" cellpadding="2" cellspacing="1">
<tr>
<th rowspan="3">AAA</th>
<th colspan="3" id="list1">BBB</th>
</tr>
<tr>
<th width="120">BBB1</th>
<th width="120">BBB2</th>
<th width="120">BBB3</th>
</tr>
<tr>
<th>BBB11</th>
<th>BBB21</th>
<th>BBB31</th>
</tr>
<tr>
<td>aaa</td>
<td>aaa1</td>
<td>aaa2</td>
<td>aaa3</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb1</td>
<td>bbb2</td>
<td>bbb3</td>
</tr>
<tr>
<td>ccc</td>
<td>ccc1</td>
<td>ccc2</td>
<td>ccc3</td>
</tr>
</table>
</body>
</html>

補足日時:2009/05/21 11:49
    • good
    • 0

document.getElementById('tbl1').childNodes


を取得して、childNodesを辿っていって3番目&4番目のtd要素ノードにstyle="display:none;"を与える。

という形になると思います。

TAG indexによく似た質問がありました。参考になるかもしれません。

掲示板/JavaScript質問板/javascript 列を非表示にしたい - TAG index Webサイト
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi? …
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

Qテーブルで複数行をまとめて非表示にしたいです

よろしくお願い致します。
以下の記述でエラーが出てしまいます。
見よう見まねで書いているので、根本的に間違っているのでしょうか・・・。

function open_close_hide(){
 var row = document.getElementsByClass('hide');
 if (row.style.display == 'none') {
  row.style.display = '';
  } else {
  row.style.display = 'none';
  }
 }

テーブルの非表示にしたい行は<tr class = "hide">としています。

クリックする部分は
<a href=\"javascript:void(0):\" onClick=\"open_close_rowhide();return false;\">表示/非表示</a>
としています

document.getElementByIDで一行ごとに非表示にするのには成功したのですが、
classで複数行を同時非表示にすることが出来ません。
getElementsByClassNameでも駄目でした。
詳しい方がおられましたら、よろしくお願い致します。

よろしくお願い致します。
以下の記述でエラーが出てしまいます。
見よう見まねで書いているので、根本的に間違っているのでしょうか・・・。

function open_close_hide(){
 var row = document.getElementsByClass('hide');
 if (row.style.display == 'none') {
  row.style.display = '';
  } else {
  row.style.display = 'none';
  }
 }

テーブルの非表示にしたい行は<tr class = "hide">としています。

クリックする部分は
<a href=\"javascript:void(0):\" onClick=\"open_close_rowhide();...続きを読む

Aベストアンサー

こんな感じでどう?

<style>
tr.hide{display:none;}
tr.display{display:table-row !important;}
</style>
<!--[if IE]>
<style>
tr.display{display:block !important;}
</style>
<![endif]-->
<script>
function open_close_rowhide(obj){
var v=obj.innerHTML;
var tr=document.getElementsByTagName("tr");
for(var i=0;i<tr.length;i++){
var cn=tr[i].className;
if(cn.match(/(^| )hide(?= |$)/)){
if(cn.match(/(^| )display(?= |$)/) && v=="非表示"){
cn=cn.replace(/(^| )display(?= |$)/,'');
}else if(!cn.match(/(^| )display(?= |$)/) && v=="表示"){
cn+=" display";
}
tr[i].className=cn;
}
}
obj.innerHTML=v=="表示"?"非表示":"表示";
return false;
}
</script>
<a href="#" onClick="return open_close_rowhide(this);">表示</a>
<table border>
<tr><th>test</th></tr>
<tr><td>1</td></tr>
<tr class="hide"><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr class="hide display"><td>5</td></tr>
<tr class="hide display aaa"><td>6</td></tr>
</table>

こんな感じでどう?

<style>
tr.hide{display:none;}
tr.display{display:table-row !important;}
</style>
<!--[if IE]>
<style>
tr.display{display:block !important;}
</style>
<![endif]-->
<script>
function open_close_rowhide(obj){
var v=obj.innerHTML;
var tr=document.getElementsByTagName("tr");
for(var i=0;i<tr.length;i++){
var cn=tr[i].className;
if(cn.match(/(^| )hide(?= |$)/)){
if(cn.match(/(^| )display(?= |$)/) && v=="非表示"){
cn=cn.replace(/(^| )display(?=...続きを読む

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<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='day'>
<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>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<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...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Q一覧から選択した行の行番号を取得について

はじめまして。
一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。
現在は、btn_selectにalertを入れて選択した行の番号が取得できたかどうか確認したところ、取得できず%{#stat.index}が出力されてしまいます。
どのようにすればボタンを押した行の行番号の取得及びその行のある項目にシステム日付を表示させることができますか?。
宜しくお願いします。

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page pageEncoding="Windows-31J" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="original" uri="/original-tags" %>
<%@taglib prefix="originalLY" uri="/original-LY-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="html-head.jsp" %>
<script type="text/javascript">
function btn_select(indx) {
alert (indx);
}
</script>
</head>
<body>
<%@ include file="HeaderTitle.jsp" %>
<s:form>
<table class="table_line" >
<tr>
<th rowspan=2 class="form_title_list" >選択</th>
<th rowspan=2 class="form_title_list" >A</th>
<th rowspan=2 class="form_title_list" >B</th>
<th rowspan=2 class="form_title_list" >C</th>
<th colspan=2 class="form_title_list" >D</th>
</tr>
<s:iterator value="shinchokuList" status="stat">
<tr>
<s:if test="%{#stat.index % 2 == 0}">
<td class="table_list1"><input type="button" value="選択" name="button"
onclick="btn_select(%{#stat.index});"/></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].A" size="10" maxlength="10" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="sist[%{#stat.index}].B" size="63" maxlength="63" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].C" size="5" maxlength="5" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].D" size="10" maxlength="10" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].E" size="10" maxlength="10" readonly="false" cssStyle="%{eErr}"/></td>
</s:if>
</s:else>
</s:iterator>
</table>
</td>
</tr>
</table>
</s:form>
</body>
<html>

はじめまして。
一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。
現在は、btn_selectにalertを入れて選択した行の番号が取得できたかどうか確認したところ、取得できず%{#stat.index}が出力されてしまいます。
どのようにすればボタンを押した行の行番号の取得及びその行のある項目にシステム日付を表示させることができますか?。
宜しくお願いします。

<%@ page contentType="text/html; charset=UTF-8" %>
<%...続きを読む

Aベストアンサー

まず、目的の
「一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたい」
の達成方法についてですが、
行番号を取得する必要はありません。

次に質問内容についてですが、

(1)行番号の取得方法
TRタグのエレメントには、rowIndexというプロパティが用意されています。
それを用いれば行番号を取得できます。
方法としましては、ボタンのINPUTタグから親の親のTRタグを参照します。

具体例を下記に示します。
適当にテキストエディタにコピペして動きを確認してみてください。
**********
<html>
<head><title>rowIndex test</title></head>
<body>
<table border="1" bordercolor="red">
<tr>
<td>
<input type="button" value="zero" onclick="alert(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
<tr>
<td>
<input type="button" value="one" onclick="alert(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
</table>
</body>
</html>
**********

alertの中身についての説明を少々致します。
this・・・INPUTタグ自身をさす。
this.parentNode・・・INPUTタグの親のタグの、TDタグをさす。
this.parentNode.parentNode・・・INPUTタグの親の親のタグの、TRタグをさす。


(2)ボタンが押された行ある項目にシステム日付を表示する方法
こちらの質問に関しましては
上記(1)を一部利用します。
TRタグから対象となるTDタグを参照します。

具体例
**********
<html>
<head>
<title>rowIndex test</title>
<script type="text/javascript">
<!--
today=new Date();
y=today.getFullYear();
m=today.getMonth()+1;
d=today.getDate();

function insertToday(inputElement){
inputElement.parentNode.parentNode.childNodes[1].innerHTML=y+"/"+m+"/"+d;
}
//-->
</script>
</head>
<body>
<table border="1" bordercolor="red">
<tr>
<td style="width:100px">
<input type="button" value="zero" onclick="insertToday(this)">
</td>
<td style="width:100px"></td>
</tr>
<tr>
<td style="width:100px">
<input type="button" value="one" onclick="insertToday(this)">
</td>
<td style="width:100px"></td>
</tr>
</table>
</body>
</html>
**********

少々説明を致します。
childNode[n]・・・そのタグのn番目の子のタグを参照します。
nは、IEでは0から、Firefoxでは1からです。
このソースではchildNodes[1]となっているため、IEでは左から2セル目に格納されます。
Firefoxでは一番左のセルに格納されます。(ボタンは消えます)

まず、目的の
「一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたい」
の達成方法についてですが、
行番号を取得する必要はありません。

次に質問内容についてですが、

(1)行番号の取得方法
TRタグのエレメントには、rowIndexというプロパティが用意されています。
それを用いれば行番号を取得できます。
方法としましては、ボタンのINPUTタグから親の親のTRタグを参照します。

具体例を下記に示します。
適当にテキストエディタにコピ...続きを読む

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

QjQueryでテーブル行の表示・非表示

JavaScript・jQueryでテーブル行(trタグ)の表示・非表示を
切り替えるスクリプトを以下のように作成しましたが
うまく動きません。

dispChg()内で
非表示に設定したクラス名(hid)を追加し
全行を非表示にできていますが
次の該当trから
非表示に設定したクラス名(hid)の削除がうまくいかないようです。

JavaScriptの引数からクラス名を引き継げないのでしょうか。

どなたか修正できる方がいらっしゃいましたら
教えてください。
よろしくお願いいたします。



<html>
<head>
<title>test</title>
<style type="text/css">
<!--
.hid
{
display:none
}
-->
</style>

<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>

<script type="text/javascript">
<!--

function dispChg(trClass){
/* まず全行を非表示 */
$('tr[class]').addClass('hid');

/* 該当の行を表示 */
$('tr[class*=trClass]').removeClass('hid');

}

-->
</script>

</head>

<body bgcolor=#ffffff topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

<input type="button" value="全部表示" onclick="dispChg('atype btype ctype dtype')">
<input type="button" value="a" onclick="dispChg('atype')">
<input type="button" value="b" onclick="dispChg('btype')">
<input type="button" value="c" onclick="dispChg('ctype')">
<input type="button" value="d" onclick="dispChg('dtype')">

<table border="1">
<tr class="atype"><td>a</td></tr>
<tr class="btype"><td>b</td></tr>
<tr class="ctype"><td>c</td></tr>
<tr class="dtype"><td>d</td></tr>
</table>

</body>
</html>

JavaScript・jQueryでテーブル行(trタグ)の表示・非表示を
切り替えるスクリプトを以下のように作成しましたが
うまく動きません。

dispChg()内で
非表示に設定したクラス名(hid)を追加し
全行を非表示にできていますが
次の該当trから
非表示に設定したクラス名(hid)の削除がうまくいかないようです。

JavaScriptの引数からクラス名を引き継げないのでしょうか。

どなたか修正できる方がいらっしゃいましたら
教えてください。
よろしくお願いいたします。



<html>
<head>
<title>test<...続きを読む

Aベストアンサー

*スクリプト部-関数差し替え
function dispChg(trClass){
if(trClass) {
$('tr[class*="type"]').addClass('hid');//全て非表示
$('.'+trClass).removeClass('hid');//指定行を表示
} else {
$('tr[class*="type"]').removeClass('hid');//全て表示
}
}

*HTML部-一行だけ変更、dispChgの引数省略で全て表示
<input type="button" value="全部表示" onclick="dispChg()">

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QJavascriptでのbuttonのname属性、もしくはid属性を取得

押されたボタンのname属性、もしくはid属性を取得し、処理を分けるプログラムを考えています。
<form>タグ自体にid属性は存在しますが、name属性はありません。
その状況で、押されたボタンのid、もしくはnameを取得するにはどうしたらいいでしょうか?

Aベストアンサー

<input type="button" onclick="ckBtn(this)" (その他のパラメーター)>

の様に書けば、呼ばれた関数で

function ckBtn(button) {
alert('id=' + button.id);
alert('name=' + button.getAttribute('name');
}

の様に元の inputタグの属性を得られます。

# 上のコードはチェックしてないのでスペルミスとかあるかも知れません。

参考URL の 「DOM-HTMLを操作するための仕組み」を見てください。

参考URL:http://javascriptist.net/docs/js_ref_ext.html


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報