doupai1876 2018-12-11 10:47
浏览 244
已采纳

如何在数据表列中获取填充文本输入字段的值

I have a data table that I populate text fields in a column for every row. I tried to get the value from these text fields but it always take the first column's text field value since as I assume id is always the same for every text field populated. How can I solve this issue ? Do I have to also populate dynamic id names for every text field ? I am getting the value with jQuery by the way.

With this piece of code:

var qty = $("#input").val();

And I am going to send this "qty" variable to a php code via an Ajax call. Ajax call is working fine, sending the variable, I have checked it so it is not the problem.

Table declaration code:

var table3 =  $("#last3").DataTable({

                                    "columnDefs": [
                                {
                                "targets": 4,
                                "data": null,
                                "defaultContent": '<input id="input" type="number"  value="" min="1" max="9"></input>'
                                },

                                {
                                "targets": 3,
                                "data": null,
                                "defaultContent": '<input type="button" value="Add" class="btn-add" style="width:100%; height:100%;"></input>'
                                },

                                { "searchable": false, "targets": 0 } ],

                                select:false,

                                "scrollY": "32vh",
                                "scrollCollapse": true,
                                "paging": false,
                            });

EDIT 1: I have this piece of code, this dynamically create a cell value and increment it by one, so basically creates an index column. I just wonder is there a way to modify this so that instead of populating the cell.innerhtml, populates the "id" attribute somehow. so this way I would have unique id attr for each text field. (does not have to be id though, I can also get the value by "name" attr.)

table3.column(4, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {cell.innerHTML = i+1;}

展开全部

  • 写回答

1条回答 默认 最新

  • dsjq6977 2018-12-12 09:03
    关注

    You need to bind the button add after table draw, because of paging, searching etc. And as i sayied in comments, inside your iterator you have the cell param, you can search inside that to find your input, and then deal with it.

    Maybe this help you:

    $(document).ready(function() {
    
    
      var table3 = $("#last3").DataTable({
    
        "columnDefs": [{
            "targets": 4,
            "data": null,
            "defaultContent": '<input id="input" type="number" class="table-input"  value="" min="1" max="9"></input>'
          },
    
          {
            "targets": 3,
            "data": null,
            "defaultContent": '<input type="button" value="Add" class="btn-add" style="width:100%; height:100%;"></input>'
          },
    
          {
            "searchable": false,
            "targets": 0
          }
        ],
    
        select: false,
    
        "scrollY": "32vh",
        "scrollCollapse": true,
        "paging": false,
      }).on('draw.dt', function() {
        $("#last3 tr").on("click", ".btn-add", function() {
          var data = table3.DataTable().row($(this).closest('tr')).data();
          console.log(data);
        })
      });
    
    
      table3.column(4, {
        search: 'applied',
        order: 'applied'
      }).nodes().each(function(cell, i) {
        var $input = $(cell).find('input');
        $input.attr({
          'id': ($input.attr('id') + i),
          'value': i
        });
      }).draw();;
    
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
    
    
    
    <table id="last3" class="display">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
          <th>Column 5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1 Data 1</td>
          <td>Row 1 Data 2</td>
          <td>Row 1 Data 3</td>
          <td>Row 1 Data 4</td>
          <td>Row 1 Data 5</td>
        </tr>
        <tr>
          <td>Row 2 Data 1</td>
          <td>Row 2 Data 2</td>
          <td>Row 2 Data 3</td>
          <td>Row 2 Data 4</td>
          <td>Row 2 Data 5</td>
        </tr>
        <tr>
          <td>Row 3 Data 1</td>
          <td>Row 3 Data 2</td>
          <td>Row 3 Data 3</td>
          <td>Row 3 Data 4</td>
          <td>Row 3 Data 5</td>
        </tr>
        <tr>
          <td>Row 4 Data 1</td>
          <td>Row 4 Data 2</td>
          <td>Row 4 Data 3</td>
          <td>Row 4 Data 4</td>
          <td>Row 4 Data 5</td>
        </tr>
      </tbody>
    </table>

    </div>
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 代写uni代码,app唤醒
  • ¥15 全志t113i启动qt应用程序提示internal error
  • ¥15 ensp可以看看嘛.
  • ¥80 51单片机C语言代码解决单片机为AT89C52是清翔单片机
  • ¥60 优博讯DT50高通安卓11系统刷完机自动进去fastboot模式
  • ¥15 minist数字识别
  • ¥15 在安装gym库的pygame时遇到问题,不知道如何解决
  • ¥20 uniapp中的webview 使用的是本地的vue页面,在模拟器上显示无法打开
  • ¥15 网上下载的3DMAX模型,不显示贴图怎么办
  • ¥15 关于#stm32#的问题:寻找一块开发版,作为智能化割草机的控制模块和树莓派主板相连,要求:最低可控制 3 个电机(两个驱动电机,1 个割草电机),其次可以与树莓派主板相连电机照片如下:
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部