Jquery/Javascript Datatables : 如何在行选择时将行数据显示到 html 文本字段中

Jquery/Javascript Datatables : How to display row data into html textfield on row selection

本文关键字：显示 数据 html 字段 文本 选择 Datatables Javascript 行选 Jquery      更新时间：2023-09-26

>我在项目中使用了以下datatable。我已经成功地将所有数据填充到datatable中。

我只需要将行选择中的特定行数据填充到同一页面上找到的文本字段中，并更新这些数据，然后这些数据将保存在数据库中。

使用的数据表链接：https://datatables.net/examples/api/select_single_row.html

JSFIDDLE： https://jsfiddle.net/o92g9goL/2/

更新： 

  var name = $(this).children('td[name="name"]').text();
  var position = $(this).children('td[name="position"]').text();
  var office = $(this).children('td[name="office"]').text();
  var age = $(this).children('td[name="age"]').text();
  var startdate = $(this).children('td[name="startdate"]').text();
  var salary = $(this).children('td[name="salary"]').text();
  var nameInp = $('input[name="name"]');
  var positionInp = $('input[name="position"]');
  var officeInp = $('input[name="office"]');
  var ageInp = $('input[name="age"]');
  var startdateInp = $('input[name="start"]');
  var salaryInp = $('input[name="salary"]');
  $(nameInp).attr('value',name);
  $(positionInp).attr('value',position);
  $(officeInp).attr('value',office);
  $(ageInp).attr('value',age);
  $(startdateInp).attr('value',startdate);
  $(salaryInp).attr('value',salary);

JSFiddle

这是你想要的，你应该使用dataTables.editor.min.js中的Simple inline editing：

 $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

JSFiddle

并检查一下：

简单的内联编辑

使用表格行控件进行气泡编辑

相关文章：