WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:テーブル内セル値の取得

0:[投稿] スケロク [2002/12/16 17:49 ][環境:IE5.0 JSP]

Tableタグを使って出来た表のセル値を加算したいのですが
表示値がうまく取得できません。

<%@ page contentType="text/html; charset=Shift_JIS" %>

<HTML lang="ja">
<HEAD>
    <TITLE>(仮)</TITLE>
    <META name="author" content="aa">
    <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <META http-equiv="Content-Style-Type" content="text/css">
    <META http-equiv="Content-Script-Type" content="text/javascript">
    
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function calc1() {
        fVal = 0 ;
        for(i=0; i<5; i++){
            /*fVal = fVal+ parseFloat(document.form1.ここがわかりません);*/
            }
        alert(fVal);
    }
    //-->
    </SCRIPT>

</HEAD>
<%
    int i = 0;
    int iDays = 5;
    int dat = 0;
%>

<BODY bgcolor="#FAFCFC" leftmargin="0" topmargin="0" marginwidth="0"
    marginheight="0" Scroll="no">
    <FORM name="form1" method="post" action="">
        <TABLE width="100" border="1" cellspacing="0"
            cellpadding="0" marginwidth="0" marginheight="0">
            <%
            for(i=0; i<5; i++){
            %>
            <TR>
                <TD name="Syoukei1" width="38" nowrap bgcolor="#FFDDFF"
                    align="right" >7.5
                </TD>
                <TD name="SyouKei2" width="38" nowrap bgcolor="#FFDDFF"
                    align="right" >8
                </TD>
            </TR>
            <%
            }
            %>
            <TD width="80">
                <INPUT type="BUTTON" name="" value="計算"  
                    onClick="calc1()">
            </TD>

        </TABLE>
    </FORM>
</BODY>
</HTML>


というコードでサンプルを作ってます。
やりたいことは
複数行の3列くらいで横計算をしたいのです。
表示値の計算で入力は不可にしたいので<INPUT type="text" 〜>
は使用したくないのです。

@取得方法を教えてください。
A複数行なので配列扱いにしたいのですが可能でしょうか?
(列にidかnameで持ち行分配列)

ご存知の方がいらっしゃいましたら教えてください。



1:[回答] _(..)_ [2002/12/16 18:54 ]

<input type="text" disabled> とか書いておけば、編集できませんよ。


2:[回答] ごだっち [MAIL] [2002/12/16 18:57 ]

とりあえず、1) だけ。(IE限定で良ければ...、ですが)

<html>
<head>
</head>
<body>
<table border="1">
<tr><td>val1</td><td>num1</td></tr>
<tr><td>val2</td><td>num2</td></tr>
</table>
<form>
<input type="button" onClick="alert(document.all.tags('td')[0].innerHTML);" value="1">
<input type="button" onClick="alert(document.all.tags('td')[1].innerHTML);" value="2">
<input type="button" onClick="alert(document.all.tags('td')[2].innerHTML);" value="3">
<input type="button" onClick="alert(document.all.tags('td')[3].innerHTML);" value="4">
</form>
</body>
</html>

まあ、これで「要素番号」を指定して、それとセットになっている「セルの値」を取得できるから、あとは配列に入れるのも簡単だよね。


3:[質問] スケロク [2002/12/16 20:34 ]

_(..)_ さん回答ありがとうございます。
<input type="text" disabled> を試させて頂きました。
更に贅沢を言うとフラットな感じで表示したいのでtype="text" を避けたんですが何かプロパティセットありますか?

ごだっちさん回答ありがとうございます。
@ここで言われてる”「要素番号」を指定して”とは”('td')[0].innerHTML”の[0]〜[3]のことですか?
それとも)" value="1"〜"4"になるのですか?
AIE限定ということはNNでは厳しいのですね?

度々恐縮ですが宜しく御願い致します。


4:[回答] ごだっち [MAIL] [2002/12/16 21:25 ]

1) [0]〜[3]のことです。

2) 以下参照。

<html>
<head>
</head>
<body>
<table border="1">
<tr><td id="td0">val1</td><td id="td1">num1</td></tr>
<tr><td id="td2">val2</td><td id="td3">num2</td></tr>
</table>
<form>
IEのみ(Opera7でも可)<br>
<input type="button" onClick="alert(document.all.tags('td')[0].innerHTML);" value="[0]">
<input type="button" onClick="alert(document.all.tags('td')[1].innerHTML);" value="[1]">
<input type="button" onClick="alert(document.all.tags('td')[2].innerHTML);" value="[2]">
<input type="button" onClick="alert(document.all.tags('td')[3].innerHTML);" value="[3]"> <br>
<br>
上記+N6以上(Opera6不可)<br>
<input type="button" onClick="alert(window.document.getElementById('td0').innerHTML);" value="td0">
<input type="button" onClick="alert(window.document.getElementById('td1').innerHTML);" value="td1">
<input type="button" onClick="alert(window.document.getElementById('td2').innerHTML);" value="td2">
<input type="button" onClick="alert(window.document.getElementById('td3').innerHTML);" value="td3"> <br>
<br>
disabled化したテキストフォームのボーダー消去(IEのみ、Opera7でも可)<br>
<input type="text" disabled style="border:0;background-Color:#ffffff;" value="123456">
</form>
</body>
</html>


5:[質問] スケロク [2002/12/17 15:47 ]

回答ありがとうございます。大変参考になりました。
@<Input Type="text">を用いた場合と
Atableの<Tr><Td>だけを用いた場合で
こだっちさんの例を参考に作っているのですがAの場合で今一歩のところでうまくいきません。計算値を今度は表示できないのです。
お知恵を貸してください。
@
<%@ page contentType="text/html; charset=Shift_JIS" %>

<html lang="ja">
<head>
<SCRIPT LANGUAGE="JavaScript">
    <!--
    function calcRow() {
        fVal= new Array() ;
        fVal[0]=0;
        fVal[1]=0;
        for(i=0; i<5; i++){
            fVal[0] = fVal[0] + parseFloat(document.all.txtCol1[i].value);
            fVal[1] = fVal[1] + parseFloat(document.all.txtCol2[i].value);
        }
        document.all.txtRowKei1.value=fVal[0];
        document.all.txtRowKei2.value=fVal[1];
        document.all.txtGoukei.value=fVal[0]+fVal[1];        
    }
    //-->

    <!--
    function calcCol() {
        fVal= new Array() ;
        fSum=0;
        for(i=0; i<5; i++){
            fVal[i] = parseFloat(document.all.txtCol1[i].value) + parseFloat(document.all.txtCol2[i].value);
            document.all.txtColKei[i].value=fVal[i];
            fSum = fSum + fVal[i]
        }
        document.all.txtGoukei.value=fSum;
    }
    //-->
</SCRIPT>
</head>

<body>
<table border="1">
    <%
    int i=0;
    for(i=1; i<6; i++){
    %>
        <TR>
            <td>
                <input type="text" name="txtCol1" style="border:0;background-Color:#ffffff;" value=<%=(2*i-1)%>>
            </td>
            <td>
                <input type="text" name="txtCol2" style="border:0;background-Color:#ffffff;" value=<%=(2*i)%>>
            </td>
            <td>
                <input type="text" name="txtColKei" disabled  style="border:0;background-Color:#ffffff;" value="0">
            </td>
        </TR>
    <%
    }
    %>
    <TR>
        <td>
            <input type="text" name="txtRowKei1" disabled style="border:0;background-Color:#ffffff;" value="0">
        </td>
        <td>
            <input type="text" name="txtRowKei2" disabled style="border:0;background-Color:#ffffff;" value="0">
        </td>
        <td>
            <input type="text" name="txtGoukei" disabled style="border:0;background-Color:#ffffff;" value="0">
        </td>
    </TR>
</table>
<form>
<input type="button" onClick="calcRow()" value="行計算">
<input type="button" onClick="calcCol()" value="列計算">
</form>
</body>
</html>

A
<%@ page contentType="text/html; charset=Shift_JIS" %>

<html lang="ja">
<head>
<SCRIPT LANGUAGE="JavaScript">
    <!--
    function calcRow() {
        fVal= new Array() ;
        fVal[0]=0;
        fVal[1]=0;
        for(i=0; i<5; i++){
            fVal[0] = fVal[0] + parseFloat(document.all.td1[i].innerHTML);
            fVal[1] = fVal[1] + parseFloat(document.all.td2[i].innerHTML);
        }
        /*alert(fVal[0]);*/

         /*この表示部分がダメです*/
        document.all.tags('RowKei1').text=fVal[0];
        
    }
    //-->

    <!--
    function calcCol() {
        fVal= new Array() ;
        fSum=0;
        fVal[0]=0;
        fVal[1]=0;
        for(i=0; i<5; i++){
            fVal[i] = parseFloat(document.all.td1[i].innerHTML) + parseFloat(document.all.td2[i].innerHTML);
            document.all.txtColKei[i].value=fVal[i];
            fSum = fSum + fVal[i]
        }
        document.all.txtGoukei.outerHTML=fSum;
    }
    //-->
</SCRIPT>
</head>

<body>
<table border="1">
    <%
    int i=0;
    for(i=1; i<6; i++){
    %>
        <TR>
            <td id="td1"><%=(2*i-1)%></td>
            <td id="td2"><%=(2*i)%></td>
            <td id="ColKei" disabled >0</td>
        </TR>
    <%
    }
    %>
    <TR>
        <td id="Rowkei1" disabled width="200">0</td>
        <td id="Rowkei2" disabled>0</td>
        <td id="Goukei" disabled>0</td>
    </TR>
</table>
<form>
<input type="button" onClick="calcRow()" value="行計算">
<input type="button" onClick="calcCol()" value="列計算">
</form>
</body>
</html>

宜しく御願い致します。


6:[回答] ごだっち [MAIL] [2002/12/17 16:54 ]

手元の環境でテストするために、指定回数分だけデータ行を記載する箇所を変更していますが、その点はアップロード前に修正してください。

<%@ page contentType="text/html; charset=Shift_JIS" %>

<html lang="ja">
<head>
<SCRIPT LANGUAGE="JavaScript">
   <!--
   function calcRow() {
       fVal= new Array() ;
       fVal[0]=0;
       fVal[1]=0;
       fVal[2]=0;
       for(i=0;document.all.tags('td').length>i;i=i+3){
       fVal[0] = fVal[0] + parseInt(document.all.tags('td')[i].innerHTML);
       }
       for(i=1;document.all.tags('td').length>i;i=i+3){
       fVal[1] = fVal[1] + parseInt(document.all.tags('td')[i].innerHTML);
       }
       for(i=2;document.all.tags('td').length>i;i=i+3){
       fVal[2] = fVal[2] + parseInt(document.all.tags('td')[i].innerHTML);
       }

       document.all('RowKei1').innerHTML=""+fVal[0];
       document.all('RowKei2').innerHTML=""+fVal[1];
       document.all('Goukei').innerHTML=""+fVal[2];
   }
   //-->

   <!--
   function calcCol() {
       fVal= new Array() ;
       fVal[0]=0;
       var rowNum = parseInt((document.all.tags('td').length)/3);
       for(i=0;rowNum>i;i++){
       var l=0; var m=0; var n=0;
       l=parseInt(i*3); m=l+1; n=l+2;
       var lval = parseInt(document.all.tags('td')[l].innerHTML);
       var mval = parseInt(document.all.tags('td')[m].innerHTML);
       fVal[0] = parseInt(lval + mval);
       document.all.tags('td')[n].innerHTML=""+fVal[0];
       }
   }
   //-->

</SCRIPT>
</head>

<body>
<table border="1">
   <%
   int i=0;
   for(i=1; i<6; i++){
   %>
       <TR>
           <td>1<%=(2*i-1)%></td>
           <td>2<%=(2*i)%></td>
           <td disabled >0</td>
       </TR>
       <TR>
           <td>3<%=(2*i-1)%></td>
           <td>4<%=(2*i)%></td>
           <td disabled >0</td>
       </TR>
   <%
   }
   %>
   <TR>
       <td id="Rowkei1" disabled width="200">0</td>
       <td id="Rowkei2" disabled>0</td>
       <td id="Goukei" disabled>0</td>
   </TR>
</table>
<form>
<input type="button" onClick="calcRow()" value="行計算">
<input type="button" onClick="calcCol()" value="列計算">
</form>
</body>
</html>


7:[完了] スケロク [2002/12/17 18:01 ]

ごだっちさん本当にありがとうございました。
document.all('RowKei1').innerHTML=fVal[0];
でうまくいきました。
その他、細かな宣言や書き方大変参考になりました。

ちなみにごだっちさんの
document.all('RowKei1').innerHTML=""+fVal[0];
の「""+fVal[0]」はどういうおまじないなんですか?
とんちんかんな質問だったらお許し下さい。


8:[完了] ごだっち [MAIL] [2002/12/17 20:18 ]

あ、いえ、お気になさらずに...(^^;
結果を文字型として使いたいときのクセみたいなものです。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World