來自表格的文本框中的數據

Question

我嘗試通過jQuery生成表格，然後將多個列連接成單個列。然後，我隱藏這些列像

UPDATE

生成表和連擊列

if (re.length > 0) { 

         $("#services_schdulue").append 
         $('#services_schdulue thead').append(
         "<tr><th>Service ID</th><th>Service Type</th><th>Service freq</th></tr>" 
          ); 

         for (var i = 0; i < re.length; i++) { 
          if (re[i] !== null) { 
        $('#services_schdulue tbody').append('<tr><td>' + re[i][0] + 
         '</td><td>' + re[i][1] + 
         '</td><td>' + re[i][2] +''+re[i][3]+''+re[i][4]+ 
         '</td></tr>');  
          } 
         } 
        } 

然後，當數據在表中顯示，然後我嘗試獲取的文本框，並在下拉

數據後

這樣的

UPDATE 2

$(function() { 
      debugger; 
      $('#services_schdulue').on('click', 'tr', function() { 
       $("#myModal").modal("show"); 
       var myTable = $('#services_schdulue').DataTable(); 
      var row = $(this); 
      //$("#txt_serv").val($(this).closest('td').children()[0]); 
      debugger; 

      var serv = row.find('td')[1].firstChild.data; 
      $("#txt_serv").val(serv); 

      var rowDate = myTable.row(this).data(); 
      $("#txt_repeat").val(rowDate[2]); 
      }); 
     }); 

Answer 1

您JSFiddle使用的是dataTable這是初始化DataTable的舊方法。 DataTable更加強大：這是你如何能做到這一點使用數組：

$(document).ready(function() { 
    example = $("#tabledata").DataTable({ 
     "dom": 'Blfrtip', 
     "columns":[ 
      { 
       "title":"No" 
      },{ 
       "title":"Status" 
      },{ 
       "title":"Speed" 
      },{ 
       "title":"Reference", 
       "sortable": false 
      } 
     ], 
     "bSort": true, 
     "scrollY": 100, 
     "scrollX": true, 
     "lengthMenu": [ 
      [10, 25, 50, -1], 
      ['10 rows', '25 rows', '50 rows', 'Show all'] 
     ], 
     "buttons": [ 
      'excelHtml5' 
     ] 
    }); 
    for(var i = 0; i < 400; i++){ 
     var speed = (1000 - (i * 2)); 
     example.row.add(["abc", "def", speed, "sd"]) 
    } 
    example.draw(); 
    $('#tabledata').on('click', 'tbody tr', function() { 
     var rowData = example.row(this).data(); 
     console.log(rowData); 
     $("#myModal").modal("show"); 
     $("#txt_status").val(rowData[1]); 
     $("#txt_speed").val(rowData[2]); 
    });   
}); 

雖然我的偏好是使用對象：

$(document).ready(function() { 
    var example = $("#tabledata").DataTable({ 
     "dom": 'Blfrtip', 
     "columns":[ 
      { 
       "title":"No", 
       "data": "no" 
      },{ 
       "title":"Status", 
       "data": "status" 
      },{ 
       "title":"Speed", 
       "data": "speed" 
      },{ 
       "title":"Reference", 
       "sortable": false, 
       "data": "reference" 
      } 
     ], 
     "bSort": true, 
     "scrollY": 100, 
     "scrollX": true, 
     "lengthMenu": [ 
      [10, 25, 50, -1], 
      ['10 rows', '25 rows', '50 rows', 'Show all'] 
     ], 
     "buttons": [ 
      'excelHtml5' 
     ] 
    }); 
    for(var i = 0; i < 400; i++){ 
     var speed = (1000 - (i * 2)); 
     example.row.add({ 
      "no": "abc", 
      "status": "def", 
      "speed": speed, 
      "reference": "sd" 
     }) 
    } 
    example.draw(); 
    $('#tabledata').on('click', 'tbody tr', function() { 
     var rowData = example.row(this).data(); 
     console.log(rowData); 
     $("#myModal").modal("show"); 
     $("#txt_status").val(rowData.status); 
     $("#txt_speed").val(rowData.speed); 
    });   
}); 

你有數據表，所以你還不如讓它儘可能地爲你工作。

所以，如果你想連接細胞內的數據，可以使用渲染這樣的：

$(document).ready(function() { 
    var example = $("#tabledata").DataTable({ 
     "dom": 'Blfrtip', 
     "columns":[ 
      { 
       "title":"No", 
       "data": "no" 
      },{ 
       "title":"Status", 
       "data": "status", 
       "visible": false 
      },{ 
       "title":"Speed", 
       "data": "speed", 
       "render": function(data, type, row){ 
        return row.status + data; 
       } 
      },{ 
       "title":"Reference", 
       "sortable": false, 
       "data": "reference" 
      } 
     ], 
     "bSort": true, 
     "scrollY": 100, 
     "scrollX": true, 
     "lengthMenu": [ 
      [10, 25, 50, -1], 
      ['10 rows', '25 rows', '50 rows', 'Show all'] 
     ], 
     "buttons": [ 
      'excelHtml5' 
     ] 
    }); 
    for(var i = 0; i < 400; i++){ 
     var speed = (1000 - (i * 2)); 
     example.row.add({ 
      "no": "abc", 
      "status": "def", 
      "speed": speed, 
      "reference": "sd" 
     }) 
    } 
    example.draw(); 
    $('#tabledata').on('click', 'tbody tr', function() { 
     var rowData = example.row(this).data(); 
     $("#myModal").modal("show"); 
     $("#txt_status").val(rowData.status); 
     $("#txt_speed").val(rowData.speed); 
    });   
}); 

這樣，你仍然有rowData的數據中的模式顯示。

希望有所幫助。工作JSFiddle here。

Answer 2

如果要訪問數據，您可以向tr click事件添加事件偵聽器。你幾乎在那裏，但你需要詢問DataTable的數據。

$('#services_schdulue tbody').on('click', 'tr', function (e) { 
    console.log(myTable.row(this).data()); 
}); 

工作JSFiddle here與您的數據。