テーブル要素の操作

2009/01/31 01:41

このQ&Aのポイント

テーブル要素の操作についての要件と、チェックボックスとセルの操作に関する質問です。
JavaScriptを使用して、チェックボックスの状態を変更する方法と、セルのテキストを変更する方法について教えてください。
ポップアップ画面でのデータの変更後、NG/OKを決定するために、チェックボックスのロック状態を解除したいです。さらに、セルのテキストを変更する際に、ボタンが消えてしまう問題が発生しています。解決策を教えてください。

natsu_0124
お礼率100% (3/3)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#84373

2009/01/31 11:44 回答No.2

ぐだぐだですが・・。 <!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>

質問者