javascript - 从 JavaScript 调用按钮

标签 javascript

我是 JavaScript 新手。我需要帮助来修改这个脚本。当我单击表格行时,我希望使用按钮的唯一 ID 调用下面的按钮。

$(document).ready(function(){
        $(selector).click(); //selector = h:commandLink
});


$(selector).find('tr').each(function(){ //selector = h:dataTable
        $(this).click(function(){
                $(selector).trigger('click'); //selector = h:commandLink       
        });
});

<h:commandLink id="lnkHidden" action="#{bean.pageRedirect}" style="text-decoration:none; color:white; display:none">

</h:commandLink>

你能帮我解决这个问题吗?

附言
这是表的代码:
<h:form id="form" >
<!-- The sortable data table -->
<h:dataTable id="dataTable" headerClass="columnHeader" value="#{bean.dataList}" binding="#{table}" var="item">
    <!-- Check box -->
    <h:column>
        <f:facet name="header">
            <h:selectBooleanCheckbox style="margin-left: 0px;" value="#{bean.value}" class="checkall" >
                <f:ajax listener="#{bean.value}" render="@form" />
            </h:selectBooleanCheckbox>
        </f:facet>
        <h:selectBooleanCheckbox  onclick="highlight(this);" value="#{bean.value" >
            <!-- if the user deselects one row deselect the main checkbox -->
            <f:ajax listener="#{bean.deselectMain}" render="@form" />
        </h:selectBooleanCheckbox>
        <!-- Click on table code -->
        <h:commandLink id="lnkHidden" action="#{bean.pageRedirect}" style="text-decoration:none; color:white; display:none">

        </h:commandLink>
    </h:column>
    <!-- Row number -->
    <h:column>
        <f:facet name="header">
            <h:outputText value="№" />
        </f:facet>
        <h:outputText value="#{bean.value}" />
    </h:column>
..........

</h:dataTable>

这是生成到 Web 浏览器中的代码的一部分:
<tr class="">
<td>
<input id="form:dataTable:1:j_idt17" type="checkbox" onclick="jsf.util.chain(this,event,'highlight(this);','mojarra.ab(this,event,\'valueChange\',0,\'@form\')')" name="form:dataTable:1:j_idt17">
<a id="form:dataTable:1:lnkHidden" onclick="mojarra.jsfcljs(document.getElementById('form'),{'form:dataTable:1:lnkHidden':'form:dataTable:1:lnkHidden'},'');return false" style="text-decoration:none; color:white; display:none" href="#"></a>
</td>
<td>2</td>
<td>35435</td>

最佳答案

随着您使用 JSP(或任何语言),id属性是你想用来定位元素的东西,但这有点棘手,因为它以复杂的方式生成它们。

由于您需要处理点击表格行,您可以绑定(bind)事件并触发 click像这样的事件:

$('table[id$="dataTable"]').find("tbody").on("click", "tr", function () {
    $(this).find('a[id$="lnkHidden"]').trigger("click");
});

这必须在 $(document).ready 内处理程序也是如此。

这将绑定(bind)一个 click <table> 的事件处理程序.当一个 <tr>被点击,这个处理程序运行,this指具体的行。有了这个,我找到了 <a> (linkBut​​ton) 包含在该行中,带有特定的 id你的目标,并触发它的click事件。

我找到链接按钮的方式是使用“属性”( [name] )和“结束于”( $= )选择器。所有生成的元素都有一个 id以原始 id 结尾设置(带有更多信息,在内部使用,在 id 的开头)...这就是引擎生成它们的方式。

我不确定您在 document.ready 中要做什么处理程序,但如果需要触发 click我们针对的所有 commandLinks 事件,您可以使用:
$('a[id$="lnkHidden"]').trigger("click");

所以我要使用的最终代码是:
$(document).ready(function () {
    $('table[id$="dataTable"]').find("tbody").on("click", "tr", function () {
        $(this).find('a[id$="lnkHidden"]').trigger("click");
    }).on("click", 'a[id$="lnkHidden"]', function (e) {
        e.stopPropagation();
    });
});

关于javascript - 从 JavaScript 调用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15887002/

相关文章:

javascript - 无法让 javascript innerHtml 在 WebView 上工作

javascript - 在 IE8 中使用 javascript __proto__

javascript - 警报,提示...在本地服务器(Tomcat)上不起作用

javascript - 如何在加载时显示隐藏的表单

javascript - 无法使用 firefox 在浏览器中运行此代码

javascript - 如何将css属性添加到 Canvas

javascript - 根据数据构建表状结构

javascript - 将 3D 模型从 Unity 导出到 three.js

javascript - (three.js) - 有什么方法可以动态创建纹理并应用于 Mesh 对象?

javascript - 三元运算符的奇怪行为