如何从文本框中获取数据并将其添加到 dataTable？

Posted 2023-05-09

【中文标题】如何从文本框中获取数据并将其添加到 dataTable？

【英文标题】：How get Data from a textbox and add it to dataTable?

【发布时间】：2016-08-27 14:54:04

【问题描述】：

我正在尝试从文本中获取信息，例如：“姓名、号码等”；并将该信息添加到我的数据表中，但我无法弄清楚如何使该部分正常工作。我还附上了可以正常工作的jsfiddle。 (https://jsfiddle.net/gon3j0uv/)

$(document).ready(function() 
  var t = $('#example').DataTable();
  var counter = 1;

  $('#addRow').on('click', function() 
    t.row.add([
      counter + '.1',
      counter + '.2',
      counter + '.3',
      counter + '.4',
      counter + '.5'
    ]).draw(false);

    counter++;
  );

  // Automatically add a first row of data
  $('#addRow').click();
);

<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

<button id="addRow">
  addrow
</button>
</br>
</br>
</br>

First name:
<input type="text" name="FirstName">
<br>
</br>
</br>
</br>
</br>
<table id="example" class="display" cellspacing="0" >
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </tfoot>
</table>

    counter++;
 );

// Automatically add a first row of data
$('#addRow').click();

);

jsFiddle

【问题讨论】：

引用标签sn-p，“（注意Java不要与javascript混淆）”。

您想将“名字”中输入的文字插入到表格单元格中？

【参考方案1】：

你必须得到输入文本中的值，我编辑你的小提琴这里是链接Example Fiddle

您必须像这样获取输入的值：

var inputText = $("input[name='FirstName']").val()

如果您想要所有列的文本，您应该为每列输入不同的输入。希望对你有帮助