javascript - XPages:如何从 Bootstrap 表中获取选定的行

Question

我使用 XPages 数据表并使用插件创建了一个响应式表:bootstrap-table-mobile一切正常， View 能够从桌面上的表格 View 切换到移动设备上的卡片 View 。

然后，我在其他目录中添加一个复选框，以获取复选框的 onClick 或 onChange 打印，但没有发生事件不会触发。有什么解决办法吗？ 下面是我的数据表

<xp:dataTable id="dataTable2" rows="30">
        <xp:this.attrs>
            <xp:attr name="data-toggle" value="table"></xp:attr>
            <xp:attr name="data-show-columns" value="true">
            </xp:attr>
            <xp:attr name="data-mobile-responsive" value="true"></xp:attr>
            <xp:attr name="data-check-on-init" value="true"></xp:attr>
            <xp:attr name="data-click-to-select" value="true">
            </xp:attr>
            <xp:attr name="data-click-to-select" value="true"></xp:attr>
        </xp:this.attrs>
        <xp:column id="column12">
            <xp:checkBox id="checkBox2">

                <xp:eventHandler event="onclick" submit="true"
                    refreshMode="partial" refreshId="viewTable" id="eventHandler3">
                    <xp:this.action><![CDATA[#{javascript:
print("onClick_Server")}]]></xp:this.action>
                    <xp:this.script><![CDATA[console.log("onClick_cllient")]]></xp:this.script>
                </xp:eventHandler>
                <xp:eventHandler event="onchange" submit="true"
                    refreshMode="complete">
                    <xp:this.action><![CDATA[#{javascript:print("onChange_Server")}]]></xp:this.action>
                    <xp:this.script><![CDATA[console.log("onChange_client")]]></xp:this.script>
                </xp:eventHandler>
            </xp:checkBox>
        </xp:column>
        <xp:column id="column14">
            <xp:text escape="true" id="id" value="#{curDoc.id}">

            </xp:text>
            <xp:this.facets>
                <xp:label value="Id" id="label10" for="column1" xp:key="header">
                </xp:label>
            </xp:this.facets>
        </xp:column>
        <xp:column id="column13">
            <xp:this.facets>
                <xp:label value="Item Mame" id="label2" for="column1"
                    xp:key="header">
                </xp:label>
            </xp:this.facets>
            <xp:text escape="true" id="ItemName" value="#{curDoc.itemname}">

            </xp:text>
        </xp:column>
    </xp:dataTable>

Answer 1

Click this link to Run.. This may help you, if not means just ignore

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <table class="table table-bordered" id="tblemp">
                <thead>
                    <th>Name</th>
                    <th>Mobile No</th>
                    <th>Email Id</th>
                </thead>
                <tbody>
                    <tr id="emp001" class="clickable-row">
                        <td>AAA</td>
                        <td>1111111</td>
                        <td>aaa@gmail.com</td>
                    </tr>
                    <tr id="emp002" class="clickable-row">
                        <td>BBB</td>
                        <td>2222222</td>
                        <td>bbb@gmail.com</td>
                    </tr>
                    <tr id="emp003" class="clickable-row">
                        <td>CCC</td>
                        <td>3333333</td>
                        <td>ccc@gmail.com</td>
                    </tr>
                </tbody>
            </table>
        </div>
     </div>
</div>

<script>
    var emp_id = "";
    $('#tblemp').on('click', '.clickable-row', function(event) {
        $(this).addClass('active').siblings().removeClass('active');
        emp_id = $(this).closest('tr').attr('id');
        alert(emp_id);
    });
</script>