javascript - 循环遍历表并找到跨度类+选中确认框弹出的复选框。

Question

我正在尝试循环遍历我的表并找到带有类和复选框的跨度以查看其是否已选中。根据是否选中以及该跨度类是否存在，将弹出一个确认框。我不断收到“需要对象”或“对象为空”类型的错误。我做错了什么？

部分表代码:

<td>
    <cfif stuff>
        <input type="checkbox" name="checkbox" value="checkbox" id="checkbox">
    <cfelse>
        stuff
    </cfif>
        hidden field
    <cfif stuff>
        <span class="isOutForAudit">
            hidden field
        </span> 
    </cfif>
</td>

Javascript 循环:

var table = document.getElementById("TableName");

    for (var i=0; i < table.rows.length; i++) 
    {
        var row = table.rows[i];
        if (row.getElementsByClassName("isOutForAudit") != null && row.getElementById("checkbox").checked == true)  
        {           
            if (confirm("Stuff") == true) 
            {
                document.myform3.action = Stuff;
            } 
            else 
            {
                return false;
            }
        }
    }

Answer 1

这应该适合你。每个复选框都有类 magicC。范围 ID 对应于复选框值。

它使用类名循环遍历所有复选框，搜索范围，并发出警报

<table><tr><td>
   <input type="checkbox" name="chk" value="0" class="magicC">
   <span id="Audit_0">hidden field</span>
    </td></tr>
    <tr><td>
   <input type="checkbox" name="chk" value="1" class="magicC">
       no hidden span
        </td></tr>
    <tr><td>
   <input type="checkbox" name="chk" value="2" class="magicC">
   <span id="Audit_2">hidden field</span>
        </td></tr>
        <tr><td><input type="submit" onclick="javascript:VChk();" valu="validate" /></td></tr>
    </table>

<script>
function VChk() {
    var chks = document.getElementsByClassName('magicC');
    for (i=0;i<chks.length;i++) {
        if (chks[i].checked) {
        if(document.getElementById('Audit_' + chks[i].value) !== null) {
            alert('span ' + i + ' exists');
        }
        }
    }
}</script>

演示 fiddle :http://jsfiddle.net/1z29yxh9/只是函数声明略有不同。

所以你可以像这样工作你的 cf 代码

<td>
    <cfif stuff>
        <input type="checkbox" name="checkbox" value="#numericID#" id="checkbox" class="magicC">
    <cfelse>
        stuff
    </cfif>
        hidden field
    <cfif stuff>
        <span class="isOutForAudit" id="Audit_#numericID#">
            hidden field
        </span> 
    </cfif>
</td>

ID 不必是数字，但它们必须是唯一且 ID 友好的(单个单词、字母数字字符、_ 等)。因此，数字 ID 效果最好。

<小时/>

编辑:正如 Scott 指出的，您可以使用 jQuery 来做到这一点。本例中的代码并没有短多少，jQuery 经常节省大量代码，而且正如他指出的那样，使交叉兼容性变得非常容易。

这是一个显示所有三种方法的 fiddle ，您可以使用这三种方法中的任何一种。 (JS、JQuery 按钮绑定(bind)或 JQuery 表单提交绑定(bind))

http://jsfiddle.net/540heL5v/1/

要使用 JQuery，您需要下载并托管该库，或者让 Google 等人来完成。 (谷歌愿意这样做。)对于用户带宽来说，最好引用一个可靠的中央主机，例如 google(因为他们可能已经下载了文件，而不需要从您的网站下载另一个副本)。

调用它的代码是

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

我故意省略了http/s:。通过不澄清，它从请求页面的协议(protocol)中提取。从 https://hostsite.com 调用它将为调用建立安全连接，从 http://hostsite.com 调用它会正常调用它。