数据表添加combobox作为列

我有一个使用Datatables的数据表 。 我创建并填充了表格，如下所示。 现在我需要实现一个combobox（假设我有2010,2011,2012）以允许用户选择一年。 然后当用户单击查看或修改链接（放置在表中）时，选定的年份将作为参数传递给另一个页面。

现在我怎么能把我的年份专栏变成一个combobox呢？

rulesTableGlobal = $('#rulesTable').dataTable( { //"bJQueryUI": true, "sPaginationType": "full_numbers", "aoColumns": [ { "sTitle": "Id", "sWidth" : "20px" }, { "sTitle": "Property ID" , "sWidth" : "20px"}, { "sTitle": "Adress" , "sWidth" : "130px"}, { "sTitle": "Suburb" , "sWidth" : "50px"}, { "sTitle": "Bond", "sWidth" : "25px" }, { "sTitle": "Year", "sWidth" : "25px" , "aType": "dom-select"}, { "sTitle": "View or Modify" , "sWidth" : "50px"}] }); function addPropertyToTable( lt_id, lt_uid, address, suburb_name, min_guests, max_guests, bondFee,cleaningFee,bookingServiceFee, weekly_rate,nightly_rate){ var _lt_id = "\'" + lt_id + "\'"; var viewLink = 'View and Modify'; var year= ""; $('#rulesTable').dataTable().fnAddData( [ lt_id, lt_uid, address, suburb_name, bondFee,cleaningFee,bookingServiceFee, weekly_rate,nightly_rate, min_guests, max_guests, year, viewLink ] ); } }); } 

Answer 1

这是我用于遇到同样问题的人的解决方案。 创建combobox并添加到第12列.Regards .. Ozlem。

  function init(){ //http://stackoverflow.com/questions/2759837/adding-dropdown-list-to-the-particular-column-using-jquery var ind = 0; var year = 2010; //var options = getYears(year, 3); $.each($('#rulesTable td:nth-child(12)'), function () { //creates a combobox var select = document.createElement('select'); select.setAttribute('class','year'); select.setAttribute('name',ind+''); select.setAttribute('id','comboYear'+ind); select.innerHTML = '201020112012'; /*for (var i= 0 ; i 

Answer 2

在HTML中定义您的combobox，如下所示：

  2010 2011 2012  

只要你需要combobox的实际选定值，你就可以打电话

 $("#year").val() 

不重复jQuery DOM查找是一个好习惯，所以你可能想这样做：

 // Define this on document ready var selectYear = $("#year"); // Use this syntax to get the current value selectYear.val() 

我无法从您的示例代码中看到您将使用它（可能在行var year = "";如果是这样，将其更改为var year = selectYear.val(); ），但我希望这可以帮助您实现目标。 如果没有，请随时在评论中询问更多信息。

编辑：根据要求提供样本以在正常表格中显示年份选择。

 
 
 
a cell
 
  2010 2011 2012  
 
  

Answer 3

使用fnRender-

 $('#example').dataTable( { aoColumns : [ { fnRender : function(oObj) { return '' + '2010' + '2011' + '2012' + ' '; } } ] });