Question

我对编码很新。我有一个jQuery数据表，当我选择一行时，该行的tds填写表格上方的html文本框。我正在努力使它无论输入到那些文本框中（并且按下保存按钮），然后保存到行中。

目前我拥有它所以它节省了1场/ td。如果我按下第0列，请填写名称文本框并按保存，然后保存。但它适用于任何专栏。它应该只编辑正确的td。另外，我想编辑整行，而不仅仅是一个td。我不知道如何做到这一点。谢谢你的帮助！

使用Javascript：

var table = $('#example').DataTable();

(function () {
      var table = document.querySelector('#example');
      var name = document.querySelector('#nameinput');
      var format = document.querySelector('#formatinput');
      var address = document.querySelector('#addressinput');
      var report = document.querySelector('#reportinput');
      var alarm = document.querySelector('#alarminput');



      table.addEventListener('click', onTableClick);

      function onTableClick (e) {
        var tr = e.target.parentElement;

        var data = [];
        for (var td of tr.children) {
          data.push(td.innerHTML);
        }

        name.value = data[0];
        address.value = data[1];
        format.value = data[2];
        report.value = data[3];
        alarm.value = data[4];
        console.log(alarm.value);


      }
        $("#saverow").click(function() {
            var table1 = $('#data-table').DataTable();
            var data = [];
            data[0] = name.value;
            data[4] = alarm.value;
            console.log(name.value);
            console.log(alarm.value);

            table1.draw(true);
        });


})();`

我已经用我迄今为止尝试的内容更新了我的代码。目前，我在文本框中输入的内容正确地显示在控制台中（在点击saverow按钮时），现在我无法弄清楚如何将其保存到表格中。

Answer 1

我认为对表格中的数据编辑很敏感。

HTML：

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Format</th>
            <th>Report Time</th>
            <th>Alarms</th>
            <th></th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>Tiger@gmail.com</td>
            <td>email</td>
            <td>1PM</td>
            <td>Master</td>
            <td class="td-button"></td>
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>111-111-1111</td>
            <td>sms</td>
            <td></td>
            <td>Master</td>
            <td class="td-button"></td>
        </tr>
    </tbody>
</table>

JS：

var table = $('#example').DataTable();

$("#example tbody tr").click(function(){
 if (! $(this).find("button").length)
 {
  $(this).find("td").each(function(){
    if (!$(this).hasClass("td-button"))
    {
        var text = $(this).text();
        $(this).html ('<input type="text" value="' +  text + '">')
    } else
        $(this).html ('<button class="button-save">Save</button>')
   })
 }
})

$(document).on("click", ".button-save",function(){
    var tr = $(this).parent().parent();
  tr.find("td").each(function(){
    if (!$(this).hasClass("td-button"))
    {
        var text = $(this).find("input").val();
        $(this).text(text)
    } else
        $(this).html('');
  })
})

https://jsfiddle.net/91wvw619/

jQuery Datatable，使用html文本框编辑选定的行数据

1 个答案: