備忘録

IT日記

IEで、動的にテーブルの列・セルを出したり消したりする例。入力フォームを含むTRやTDを消すと、ちゃんとタブフォーカスはそこを飛ばしてくれるみたいだ。

<html>

<head>

<title>案件検索条件入力画面</title>

<script>

function change () {

    document.getElementById('tbl01').style.display="none";

}

</script>

</head>

<body onLoad="">

案件検索条件入力画面

<BR><BR>

<form action="" onSubmit="change(); return false;">

<TABLE id="TBL01" bgColor=#0000ff border=1 cellPadding=0 cellSpacing=0>

  <TBODY>

  <TR id="TR01" align=middle>

    <TD id="TD01-001" bgColor=#99ccff width=200><input>

      <DIV class=mrgn>検索条件</DIV></TD>

    <TD id="TD01-002" bgColor=#99ccff width=300><input>

      <DIV class=mrgn>検索内容</DIV></TD>

    <TD id="TD01-003" bgColor=#99ccff width=200><input>

      <DIV class=mrgn> 備　考 </DIV></TD>

  </TR>

  <TR id="TR02" align=middle>

    <TD id="TD02-001" bgColor=#99ccff width=200><input>

      <DIV class=mrgn>検索条件</DIV></TD>

    <TD id="TD02-002" bgColor=#99ccff width=300><input>

      <DIV class=mrgn>検索内容</DIV></TD>

    <TD id="TD02-003" bgColor=#99ccff width=200><input>

      <DIV class=mrgn> 備　考 </DIV></TD>

  </TR>

  </TBODY>

</TABLE>

<input type="submit" value="送信" />

<input type="button" onClick="document.getElementById('TD02-001').style.display='none';" value="TD02-001 OFF"/>

<input type="button" onClick="document.getElementById('TD02-001').style.display='block';" value="TD02-001 ON"/>

<input type="button" onClick="document.getElementById('TR02').style.display='none';" value="TR02 OFF"/>

<input type="button" onClick="document.getElementById('TR02').style.display='block';" value="TR02 ON"/>

</form>

</body>

</html>