如何將按鈕添加到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); 
});