Блог

Главная - Вопросы по программированию - получите данные из таблицы данных по щелчку мыши

получите данные из таблицы данных по щелчку мыши

#javascript #jquery #datatable

#javascript #jquery #datatable

Вопрос:

Как получить объект данных, щелкнув по ячейке.Я создал таблицу и использовал datatable.Я хочу получить географию и тип клиента по щелчку ячейки, который я пробовал как

 $('#table tbody').on( 'click','td',  function () {
 //alert ('clicked');
   //var data1 = table.row().data();
   var data1 = table.row( $(this).parents('tr') ).data();
   console.log(data1);
    alert( data1[0]  "'s Customer type: "  data1[ 2 ] );
} );

мой идентификатор таблицы — table, и я получил ответ, как показано ниже, в консоли для console.log(data1); 

 {Geography: "APAC", Current: "0", CustomerType: "AMRevenue", DSO: "0", OverDue: "0"}


getting undefined for data1[0] how to get the geo and customer type

Ответ №1:

Сначала вам нужно назначить переменную в качестве таблицы для инициализации datatable amp; в datatable есть один метод InitComplete, поэтому из этого метода можно динамически получить идентификатор таблицы, а затем использовать функциональность метода click внутри метода InitComplete, как показано в приведенном ниже коде. Итак, tr из tbody и получаем значение метода table.row(this).data().
Я надеюсь, что приведенный ниже фрагмент вам очень поможет.

 $(document).ready(function() {
    var table = $('#table').DataTable({
        columns: [
            { title: "Geography" },
            { title: "Current" },
            { title: "Customer Type" },
            { title: "DSO" },
            { title: "OverDue" }
        ],
        initComplete: function(settings, json){
            $('#' settings.sTableId ' tbody tr').on('click', function(){
                var data = table.row(this).data();
                console.clear();
                console.log('Geography=> ' data[0]);
                console.log('Customer Type=> ' data[2]);
            });

        }
    });
}); 
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

<table id="table" class="display" style="width:100%; text-align: center;">
    <tbody>
        <tr>
            <td>APAC</td>
            <td>0</td>
            <td>AMRevenue</td>
            <td>0</td>
            <td>0</td>
        </tr>
        <tr>
            <td>CAAP</td>
            <td>1</td>
            <td>CARevenue</td>
            <td>0</td>
            <td>1</td>
        </tr>
        <tr>
            <td>JAPA</td>
            <td>1</td>
            <td>JARevenue</td>
            <td>1</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

Ответ №2:

Если вы добавите событие щелчка td и нажмете на каждое td , вы сможете получить значение этих td данных с помощью $(this).text(); . Взгляните на фрагмент ниже и после запуска фрагмента щелкните td и посмотрите значение.

 $("#myTable tbody td").click(function () {
    console.log($(this).text());
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table class="table" id="myTable">
    <thead>
        <tr>
            <th>FirstName</th>
            <th>LastName</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>

        </tr>
        <tr>
            <td>Jane</td>
            <td>Burl</td>
        </tr>

    </tbody>
</table>

Update: Если вы нажмете на определенную строку и хотите получить данные всей строки, вы можете просто следовать этому пути:

 $("#myTable tbody td").click(function () {
    var row = $(this).closest("tr");    // Find the row
    var cell1 = row.find("td:nth-child(1)").text(); // Find the first cell's data
    var cell2 = row.find("td:nth-child(2)").text(); // Find the second cell's data
    console.log(cell1   " "   cell2);
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table id="myTable">
    <thead>
        <tr>
            <th>FirstName</th>
            <th>LastName</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>

        </tr>
        <tr>
            <td>Jane</td>
            <td>Burl</td>
        </tr>

    </tbody>
</table>

Ответ №3:

Я думаю, вы пропустили какую-то мелочь, просто проверьте мой код:

 <table id="table" class="display" width="100%"></table>

В файле javascript:

     var dataSet = [
  [
    "Tiger Nixon",
    "System Architect",
    "Edinburgh",
    "5421",
    "2011/04/25",
    "$320,800"
  ]
];

$(document).ready(function () {
  $("#table").DataTable({
    data: dataSet,
    columns: [
      { title: "Name" },
      { title: "Position" },
      { title: "Office" },
      { title: "Extn." },
      { title: "Start date" },
      { title: "Salary" }
    ]
  });

  var table = $("#table").DataTable();

  $("#table tbody").on("click", "tr", function () {
    var data = table.row().data();
    console.log('data', data);
    alert(data[0]   "'s salary is: "   data[5]);
  });
});

Вы получите свои данные в строке

Метки: