SuperTableは縦スクロール、横スクロールも実現できます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJG-lmQr4KOL58-YzOPONG_SAXJlLHpqaTZzlykLwRez2_aUqPKd9bKfSFxvwAjPjmBaf7Jq5yrWcOJX_MEl7tWz1nAZIhBVsuUsEVJsTAhAhfAaUd23McQ5DceDNfEKebtioWuWAUwCg/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%EF%BC%882010-01-24+15.55.14%EF%BC%89.png)
ですが、RadioButtonを入れると、選択表示にならないという状態になる。HTMLのinputにはcheckedついているのに!
その原因は、スクロールテーブルの実現方法にあるんですが、SuperTableのスタイルシートを外すと見えてきます。
まず、fixedCol:0 = 列固定を無し に指定してみると、こんな感じになります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq2rIPsLVC9FtinxCU5xf0zp5T6s4jFc2JSM4-8ElNjKKe2RgctyVyByVoBfo49H97rHCMDubgBfOvvM0fW0riuyvFsVGVRg4ZgbxhEfTDKVyNU4_Nv3BspSvYOHgYfD5Q2hmuZEeEFqg/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%EF%BC%882010-01-24+16.01.25%EF%BC%89.png)
行ヘッダーの列を2つにして、cssで縦スクロールを実現しているんですね。
次に、fixedCol:1 = 1つ目の列を固定 に指定してみると、こんな感じになります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirV-rP8cPMwt3rTedh3CfSyBD3OlfMIhGJbIYj77BQMM0_kmhLyT4nJCRdpCPfsPHQr13s9gi4og27i7zlstIXmRzBOff6D8fW-9st2aJlBC_tTBVrKb_ygT3z0WTCzjxfx_9Pg69Ja50/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%EF%BC%882010-01-24+16.04.06%EF%BC%89.png)
テーブル内のラジオボタンの行までガシガシ作られちゃってます。
ラジオボタンはグループ内で1つのみの選択という作りをしますので、複製された行は未選択状態になります。
この状態でSuperTableのcssをあてると、綺麗に全部未選択状態に見えてしまいます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPj9yckAfHtjOGobF8-AI2G8Au65rHTfu6mZM6BZiD3weisbH5aR5LRAi_92TpvYoSNDSQqBd_u-A-PbxIzQxLN5Fz8OjlAGm_KNKB7188YvMkk98ymr2TJti1xa7cs8lz_79I9KRJFHk/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%EF%BC%882010-01-24+16.06.58%EF%BC%89.png)
そこで、複製された方の列のラジオを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列目のラジオの選択が見えなくなってしまいます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFV5cZQPtc5CSEtyXzWsXufeCOohRiLpeUhHfLkf5IWV2Jg-gQL6AnGVUr2NhEzEusmItRi9LHKEj9tjtFD8SpY2dbGIwSYDm2F3jIW-cOgnGB_9geH1NZnkLFaG_Y9e6ZtVbKkqS3gs/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%EF%BC%882010-01-24+16.15.01%EF%BC%89.png)
つまり、列固定している列は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を当てない状態ではこんな感じに仕上げる。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2XcLXU6N5rvBGBBamMVkNEVlNZvove_ZS-SS5FSUlS9AKckEXQQO4U8dwF1kz5WowVN-lePfCPntoCZy3cQupOAc2_HROrehXBayFY90Vkr5DTscx9XMd_tIkPKuFom0Sez1fC3q76Xg/s320/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%EF%BC%882010-01-24+16.20.35%EF%BC%89.png)
たまたま、ラジオで選択が表示されなくなって気づきましたが、textやcheckboxも2重に生成されることになります。
なので、HTMLで情報送信したがサーバで上手く反映されない...とハマるパターンもありそう。
なんにも考えずに使うと怖いなーと思った一件でした。