1

ボックスをチェックすると、表示される画像がyes.jpgの場合、列の下部にある出力ボックスに数字が追加されるテーブルを作成しようとしています。そうでない場合、番号は追加されません。3 つの列があり、各チェックボックスは 3 つの画像、つまり 3 つの出力ボックスに影響します。これが私のコードです。

    <html>
<head>
    <script>
     function onSelect(rowId)
     {
        var row = document.getElementById(rowId);
        var checkBox = row.getElementsByTagName("checkRow")[0];
        var outputRow = document.getElementById("outputRow");
        var totalRow1 = outputRow.getElementById("total1");
        var totalRow2 = outputRow.getElementById("total2");
        var totalRow3 = outputRow.getElementById("total3");
        //If box is checked, check images. If they are yes, edit boxes. 
        if (checkBox.checked)
            if (row.getElementById.("image1").src.indexOf(yes.png) > -1)
            {
                totalRow1.innerHTML = "dfd";
            }
        else {
            //checkBox = 
            }
        }
         /*function onCheck()
        {
            var total1 = document.getElementById("total1");
            window.alert("sometext");
            total1.innerHTML = "dfd";
        } */
    </script>
</head>

<body>
    <table border="1">
        <tr> <!-- Table Header -->
            <td>
                Checkbox
            </td>
            <td>
                Items
            </td>
            <td>
                Area 1
            </td>
            <td>
                Area 2
            </td>
            <td>
                Area 3
            </td>
        </tr>

        <tr id="checkRow"> <!-- Row 1 -->
            <td>
                <form>
                    <input type="checkbox" name="Row1" value="Row1" onclick="onCheck();">
                </form>     
            </td>
            <td>
                Item
            </td>
            <td id="image1">
                <img src="yes.png" alt="Needed">
            </td>
            <td id="image2">
                <img src="yes.png" alt="Needed">
            </td>
            <td id="image3">
                <img src="no.png" alt="Needed">
            </td>   
        </tr>



        <tr id="outputRow"> <!-- Table Bottom -->
            <td>
                <!--Empty-->
            </td>
            <td>
                Summation
            </td>
            <td id="total1">
                Area 1
            </td >
            <td id="total2">
                Area 2
            </td>
            <td id= "total3">
                Area 3
            </td>
        </tr>
    </table>
</body>

現在、出力ボックスの1つで出力テキストを編集しようとしています(私のonCheck()方法で見られるように)。ただし、これでもうまくいかないようです。アラートを追加しましたが、これも発生しません。私は何を間違っていますか？

4

1 に答える 1

0

たくさんのことがあります、あなたは間違っています、

まず、onCheck()チェックボックスをクリックすると関数が呼び出されますが、そのようなjavascript関数はありません。代わりに持っていonSelect(id)ます。

.getElementById第二に、あなたはそれらのID、'image1'としてあなたをしようとしていますTDs、そしてすべてはtdsのIDであり、imgsではありません

そして、あなたは.srcそれらのためにアクセスしているので、とにかくそれは間違っています。

改善点：

  1. 入力チェックボックスを次のように変更します。

     <input type="checkbox" name="Row1" value="Row1"  onchange="onCheck(this);">

あなたがしていることは、関数onCheck（this）で入力の参照を渡しているということです。

2。次に、マークアップを次のように変更します。

     <td>
            <form>
                <input type="checkbox" name="Row1" value="Row1"  onchange="onCheck(this);">
            </form>     
        </td>
        <td>
            Item
        </td>
        <td >
            <img  id="image1" src="yes.png" alt="Needed">
        </td>
        <td >
            <img id="image2" src="yes.png" alt="Needed">
        </td>
        <td >
            <img  id="image3" src="no.png" alt="Needed">
        </td>   
    </tr>

私が行ったのは、適切な要素、つまりTDではなくIMGにIDを提供することだけです。

第三に、onCheck（）を次のようにします。

function onCheck(cb)
         {
            if(cb.checked===true)
            {
                if(document.getElementById('image1').src.toString().indexOf('yes')>0){
                    document.getElementById('total1').innerHTML='555';
                } 
                else
                {
                    document.getElementById('total1').innerHTML='No';
                }

                if(document.getElementById('image2').src.toString().indexOf('yes')>0){
                    document.getElementById('total2').innerHTML='555';
                } 
                else
                {
                    document.getElementById('total2').innerHTML='No';
                }

                if(document.getElementById('image3').src.toString().indexOf('yes')>0){
                    document.getElementById('total3').innerHTML='555';
                } 
                else
                {
                    document.getElementById('total3').innerHTML='No';
                }  
            }
        }

つまり、基本的にonCheckはあなたのものとほとんど同じです。

今、この動作するフィドルを参照してください、私はあなたのために作りました、それは動作します。もちろん、私はあなたがそれをすべてやっている方法が嫌いです。これはすべて、はるかに簡単な方法で実行できます。

また、 jQueryについて学ぶと、生活が楽になります。

于 2013-03-10T19:06:39.997 に答える