SuperTable内のラジオボタンの選択が有効にならない ~ guess what?

HTMLでテーブルのスクロールを実現したいため、SuperTableというのを使ってみました。

SuperTableは縦スクロール、横スクロールも実現できます。

ですが、RadioButtonを入れると、選択表示にならないという状態になる。HTMLのinputにはcheckedついているのに！
その原因は、スクロールテーブルの実現方法にあるんですが、SuperTableのスタイルシートを外すと見えてきます。

まず、fixedCol:0 = 列固定を無しに指定してみると、こんな感じになります。

行ヘッダーの列を2つにして、cssで縦スクロールを実現しているんですね。

次に、fixedCol:1 = 1つ目の列を固定に指定してみると、こんな感じになります。

テーブル内のラジオボタンの行までガシガシ作られちゃってます。
ラジオボタンはグループ内で1つのみの選択という作りをしますので、複製された行は未選択状態になります。
この状態でSuperTableのcssをあてると、綺麗に全部未選択状態に見えてしまいます。

そこで、複製された方の列のラジオをJavaScriptで無理矢理選択状態にしてみる


try {
 var myST = new superTable("matrixb41dbb", {
 cssSkin : "sDefault",
 headerRows : 0,
 fixedCols : 1,
 colWidths : [150,100,100,100]
});
} catch (e) { }
checkRadio(document.form1.test1, "あ");
checkRadio(document.form1.test2, "い");
checkRadio(document.form1.test3, "う");
checkRadio(document.form1.test4, "あ");
checkRadio(document.form1.test5, "い");
checkRadio(document.form1.test6, "う");

function checkRadio(radios, selected) {
 for (i=radios.length - 1; i>=0;i--){
  if (radios[i].value===selected) {
   radios[i].checked = true;
   break;
  }
 }
}

すると、上手く表示されるようになります。

この状態で、fixedCols : 2 = 2列目まで列固定にして試してみると、2列目のラジオの選択が見えなくなってしまいます。

つまり、列固定している列は1つめのテーブルの情報を、列固定していない列は2つ目のテーブルの情報を見てるよーです。
なので、今回の例では2列目の「あ」の選択値の場合は、1つ目のテーブルのラジオを選択してあげれば見れるようになります。


checkRadioFirst(document.form1.test1, "あ");
checkRadio(document.form1.test2, "い");
checkRadio(document.form1.test3, "う");
checkRadioFirst(document.form1.test4, "あ");
checkRadio(document.form1.test5, "い");
checkRadio(document.form1.test6, "う");

function checkRadioFirst(radios, selected) {
 for (i=0; i<radios.length - 1;i++){
  if (radios[i].value===selected) {
   radios[i].checked = true;
   break;
  }
 }
}

cssを当てない状態ではこんな感じに仕上げる。

たまたま、ラジオで選択が表示されなくなって気づきましたが、textやcheckboxも2重に生成されることになります。
なので、HTMLで情報送信したがサーバで上手く反映されない...とハマるパターンもありそう。

なんにも考えずに使うと怖いなーと思った一件でした。

2010年1月24日日曜日