javascript - 使用下拉选择的值更新单元格

Question

我需要根据下一列下拉值更新列中的单元格。但我仍然无法实现它。

有人可以帮我解决这个问题。先感谢您

$(document).ready(function() {
  var table = $('#example').DataTable({
    data: array,
    "columnDefs": [{

      "targets": -1,
      "render": function(meta) {
        return "<select id='optsl' onchange='getselect(this)'><option value='0'>Select Header</option><option value='1'>Client</option><option value='2'>Date</option><option value='3'>Date period</option><option value='4'>Topic</option><option value='5'>Full Total</option><option value='6'>Tax Total</option><option value='7'>Comment1</option><option value='3'>Comment2</option></select>";

      }
    }],

  });
});


var table = document.getElementById("#example");
//var cells = table.getElementsByTagName('th');

function getselect(table) {
  var d = $("#optsl option:selected").val();
  table.row('selected', 4).data(d).draw();
}





var array = [
  [null, null, null, null, null],
  [null, "Rough Costing", null, null, null],
  [null, null, null, null, null],
  [null, "Client", "Ua Limited", null, null],
  [null, "Product", null, null, null],
  [null, "Pro: Name", "Idam ", null, null],
  [null, "Est.: No", null, null, null],
  [null, "Time: period ", "43299", null, null],
  [null, "Date", "15th July - 2018", null, null],
  [null, null, null, null, null]
];

getselect($('#example'));

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" />


<div class="container">
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 5</th>
        <th>select</th>

      </tr>
    </thead>



    <tbody>

    </tbody>
  </table>
</div>

我的小提琴

标签： javascriptjquerydatatables

Answer 1

以下应该会让你顺利上路

$(document).ready(function() {

  function getSelectOptions(value) {
    var select = $("<select><option value='0'>Select Header</option><option value='1'>Client</option><option value='2'>Date</option><option value='3'>Date period</option><option value='4'>Topic</option><option value='5'>Full Total</option><option value='6'>Tax Total</option><option value='7'>Comment1</option><option value='3'>Comment2</option></select>");
    if (value) {
      select.val(value).find(':selected').attr('selected', true);
    }
    return select.html()
  }



  var table = $('#example').DataTable({
    data: array,
    "columnDefs": [{

      "targets": -1,
      "render": function(data, type, row, meta) {
        return "<select class='mySelect' data-col='" + meta.col + "'>" +
                getSelectOptions(data) + "</select>";
      }
    }],

  });

  $('#example').on('change', 'select.mySelect', function() {
    var colIndex = +$(this).data('col')
    var row = $(this).closest('tr')[0];
    var data = table.row(row).data();
    data[colIndex] = this.value
    data[colIndex-1] = $(this).find(':selected').text();
    table.row(row).data(data).draw();
  })
});








var array = [
  [null, null, null, null, null],
  [null, "Rough Costing", null, null, null],
  [null, null, null, null, null],
  [null, "Client", "Ua Limited", null, null],
  [null, "Product", null, null, null],
  [null, "Pro: Name", "Idam ", null, null],
  [null, "Est.: No", null, null, null],
  [null, "Time: period ", "43299", null, null],
  [null, "Date", "15th July - 2018", null, null],
  [null, null, null, null, null]
];

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" />


<div class="container">
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 5</th>
        <th>select</th>

      </tr>
    </thead>



    <tbody>

    </tbody>
  </table>
</div>