1

我正在尝试创建一个表格，当我选中一个框时，如果显示的图像是 yes.jpg，则会在列底部的输出框中添加一个数字。如果没有，则不会添加任何数字。共有三列，每个复选框影响三个图像和三个输出框。这是我的代码。

    <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>

目前，我只是想在其中一个输出框上编辑输出文本（如我的onCheck()方法中所见）。但是，即使这样似乎也不起作用。我添加了一个警报，也没有发生。我究竟做错了什么？

4

1 回答 1

0

有很多事情，你做错了，

首先，您onCheck()在单击复选框时调用了函数，但没有这样的 javascript 函数。你有onSelect(id)。

其次，您正在尝试将.getElementById您TDs作为那些 id 'image1' 并且都是 tds 而不是 imgs 的 id

然后你正在访问.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>

我所做的只是为正确的元素（即 IMG，而不是 TD）提供 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 回答