テーブル要素の操作

解決済

質問者：natsu_0124
質問日時：2009/01/31 01:41
回答数：2件

お世話になります。

ASP.NETにて開発を行っているのですが、要件として
以下の条件が挙げられています。

(1)親画面に検索結果を表示
(2)親画面にはチェックボックスが先頭に存在する。
チェックボックスは行のセル２つ目がＮＧと表記されている場合
チェックのON/OFFが行えない。
(3)２セル目にはボタンとテキストが表示される。ボタンを押すと
ポップアップ画面を表示。ボタンを押した行のデータを子画面で
変更後、変更後の値によってＮＧ／ＯＫが決定する。

行のイメージとしては以下です・・。

※｜区切りがテーブルの1セルです。

| □ | [ボタン]　NG |　コード | 名称・・・

ポップアップ画面にはどの行からアクセスされたかの行情報を
セッションに保持しています。

○やりたい事
(1)JavaScriptにてチェックボックスのEnableをTrueに変更したい。
（ポップアップでＯＫが押されるとＮＧはＯＫに変更されます。そのタイミングでチェックボックスのロック状態を解除したく思っています。）
(2)セル２のＮＧのテキストをJavaScriptで操作しInnerTextにて書き換えるとボタンまで消えてしまう。（恐らくテーブルセルの中のすべてがInnerTextで上書きされてしまうのですが・・・）
テキストだけ変更する方法はないでしょうか・・。

ややこしい内容で申し訳ありませんが、お知恵をお貸し下さい＞＜

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： KanjiTalk
回答日時：2009/01/31 11:23

innerTextは確かIE独自（間違えてたらごめんなさい）のプロパティなのでinnerHTMLをお使いください。

その際にボタンのHTMLも含めて書き直せばいいと思います。
またはテキストだけをspan要素に入れてそれのみを書き換えるという方法も考えられます。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます＞＜
週明けにでも実験してみます^^;

通報する

お礼日時：2009/01/31 18:53

No.2ベストアンサー

回答者： _pipi_
回答日時：2009/01/31 11:44

ぐだぐだですが・・。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Change Image</title>
<style type="text/css">
#popup { width:300px; background-color:#888; border:3px #333 double; padding:1ex;}
</style>
<body>
<table border="1" id="abc">
<tr>
<td><input type="checkbox"></td>
<td><input type="button" value="inp" class="popup">NG</td>
<td>100</td>
<td>名称01</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="button" value="inp" class="popup">OK</td>
<td>200</td>
<td>名称03</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><input type="button" value="inp" class="popup">NG</td>
<td>300</td>
<td>名称03</td>
</tr>
</table>
<div id="popup">
<form>
<p>
Code:<input type="text" id="c2"><br>
Name:<input type="text" id="c3"><hr>
<input type="button" value="Check" id="chkbtn">
</p>
</form>
</div>
<script type="text/javascript">
//@cc_on
addEvent(window, 'load', function(){ tableCheck('abc');document.getElementById('popup').style.display='none'; });
addEvent(document.body, 'click', tableClick);

function tableCheck (tid) {
var obj;
var chk;
var tbl = document.getElementById(tid);
for (var cnt = 0, max = tbl.rows.length; cnt < max; cnt++) {
chk = tbl.rows[cnt].cells[1].childNodes[1].nodeValue;
obj = tbl.rows[cnt].cells[0].firstChild;
if( obj.tagName == 'INPUT' && obj.type == 'checkbox' && chk == 'NG') obj.disabled = true;
}
}
var poj;
function tableClick (evt) {
var s = document.getElementById('popup').style;
var obj = evt.target || evt.srcElement;
var n;
if (obj.className == 'popup') {
poj = obj.parentNode.parentNode;
s.top = obj.offsetTop + 30 +'px';
s.left = obj.offsetLeft + 'px';
s.display = s.display == 'none' ? 'block': 'none';
document.getElementById('c2').value = poj.cells[2].firstChild.nodeValue;
document.getElementById('c3').value = poj.cells[3].firstChild.nodeValue;
}
if (obj.id == 'chkbtn') {
s.display = 'none';
n = document.getElementById('c2').value-0;
poj.cells[2].firstChild.nodeValue = document.getElementById('c2').value;
poj.cells[3].firstChild.nodeValue = document.getElementById('c3').value;
if( 100<n && n<300) {
poj.childNodes[0].firstChild.disabled = false;
poj.childNodes[1].childNodes[1].nodeValue = 'OK';
} else {
poj.childNodes[0].firstChild.disabled = true;
poj.childNodes[1].childNodes[1].nodeValue = 'NG';

}
}
}

function addEvent(elementId, evt, eventHandler, flag){
var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
element./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/evt, eventHandler, flag);
}
</script>