如何将按钮添加到jquery数据表单元格？

Question

我创建了一个jquery数据表样本。

代码：

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:composite="http://java.sun.com/jsf/composite"
    >

<composite:interface>

</composite:interface>

<composite:implementation>

    <style type="text/css" title="currentStyle">
        @import "/resources/css/demo_table.css";
    </style>

    <script type="text/javascript" charset="utf-8">

        $(document).ready(function () {

            $('#example').dataTable(
                    {
                        /****************index code****************/
                        "fnDrawCallback": function (oSettings) {
                            var that = this;

                            /* Need to redo the counters if filtered or sorted */
                            if (oSettings.bSorted || oSettings.bFiltered) {
                                this.$('td:first-child', {"filter": "applied"}).each(function (i) {
                                    that.fnUpdate(i + 1, this.parentNode, 0, false, false);
                                });
                            }
                        },
                        "aoColumnDefs": [
                            { "bSortable": false, "aTargets": [ 0 ] }
                        ],
                        "aaSorting": [
                            [ 1, 'asc' ]
                        ],

                        /****************get data****************/
                        "aLengthMenu": [
                            [2, 5, 10, -1],
                            [2, 5, 10, "All"]
                        ],
                        "processing": true,
                        "ajax": {
                            "url": "/DataTableServlet",
                            "dataSrc": "demo",
                            "type": "GET"
                        }
                    });

            /****************click event code****************/
            $("#example tbody").click(function (event) {

                $(oTable.fnSettings().aoData).each(function () {
                    $(this.nTr).removeClass('row_selected');
                });
                $(event.target.parentNode).addClass('row_selected');
            });

            $("#example").on('click', 'tbody tr', function (event) {
                var aPos = oTable.fnGetPosition(this);
                var aData = oTable.fnGetData(aPos);
                gIDNumber = aData[1];
                $(PrimeFaces.escapeClientId('#{p:component('asd')}')).val(gIDNumber);
            });


            oTable = $('#example').dataTable();


            var button = document.createElement("button");
            button.innerHTML = "Text";
        });

    </script>


    <p:panel header="hello">
        <div id="dynamic">
            <table style="cellpadding:0 ;cellspacing:0 " border="0" class="display"
                   id="example">
                <thead>
                <tr id="zz">
                    <th style="width: 3%">Num</th>
                    <th style="width: 3%">First Name</th>
                    <th style="width: 3%">Last Name</th>
                    <th style="width: 3%">Address 1</th>
                    <th style="width: 3%">Address 2</th>

                </tr>
                </thead>
            </table>

        </div>
        <br/>
        <br/>
        <h:inputText id="asd" value="click rows"/>
    </p:panel>


</composite:implementation>


</ui:composition>

我想在其中一个单元格中插入一个按钮。我怎么能这样做？

当然我创建按钮“按钮”，但我不知道如何在一个单元格中插入。

请帮帮我。非常感谢

---

我在代码中添加了@muno代码。它是：

<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite"
>

<composite:interface>

</composite:interface>

<composite:implementation>

<style type="text/css" title="currentStyle">
    @import "/resources/css/demo_table.css";
</style>

<script type="text/javascript" charset="utf-8">

    $(document).ready(function () {

        $('#example').dataTable(
                {
                    /****************index code****************/
                    "fnDrawCallback": function (oSettings) {
                        var that = this;

                        /* Need to redo the counters if filtered or sorted */
                        if (oSettings.bSorted || oSettings.bFiltered) {
                            this.$('td:first-child', {"filter": "applied"}).each(function (i) {
                                that.fnUpdate(i + 1, this.parentNode, 0, false, false);
                            });
                        }
                    },
                    "aoColumnDefs": [
                        { "bSortable": false, "aTargets": [ 0 ] }
                    ],
                    "aaSorting": [
                        [ 1, 'asc' ]
                    ],

                    /****************get data****************/
                    "aLengthMenu": [
                        [2, 5, 10, -1],
                        [2, 5, 10, "All"]
                    ],
                    "processing": true,
                    "ajax": {
                        "url": "/DataTableServlet",
                        "dataSrc": "demo",
                        "type": "GET"
                    }
                });

        /****************click event code****************/
        $("#example tbody").click(function (event) {

            $(oTable.fnSettings().aoData).each(function () {
                $(this.nTr).removeClass('row_selected');
            });
            $(event.target.parentNode).addClass('row_selected');
        });

        $("#example").on('click', 'tbody tr', function (event) {
            var aPos = oTable.fnGetPosition(this);
            var aData = oTable.fnGetData(aPos);
            gIDNumber = aData[1];
            $(PrimeFaces.escapeClientId('#{p:component('asd')}')).val(gIDNumber);
        });


        oTable = $('#example').dataTable();

$("#myButton").click(function ()
{
var test = $('<button/>',
{
    text: 'Test',
    click: function () { alert('hi'); }
 });
var parent = $('<tr><td></td></tr>').children().append(test).end();
$("#addNodeTable tr:last").before(parent);
});


        var button = document.createElement("button");
        button.innerHTML = "Text";
    });

</script>


<p:panel header="hello">
    <div id="dynamic">
        <table style="cellpadding:0 ;cellspacing:0 " border="0" class="display"
               id="example">
            <thead>
            <tr id="zz">
                <th style="width: 3%">Num</th>
                <th style="width: 3%">First Name</th>
                <th style="width: 3%">Last Name</th>
                <th style="width: 3%">Address 1</th>
                <th style="width: 3%">Address 2</th>

            </tr>
            </thead>
        </table>

    </div>
    <br/>
    <br/>
    <h:inputText id="asd" value="click rows"/>
    <h:button id="myButton" value=""/>
</p:panel>


</composite:implementation>


</ui:composition>

Answer 1

这是将按钮添加到html表的代码。

$("#myButton").click(function ()
{
    var test = $('<button/>',
    {
        text: 'Test',
        click: function () { alert('hi'); }
     });

    var parent = $('<tr><td></td></tr>').children().append(test).end();
    $("#addNodeTable tr:last").before(parent);
});