Javascript 获取作为输入文本字段的 Datatables 单元格值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42917738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get Datatables cell value that is input text field
提问by K Hymanson
I'm generating a DataTable with a javascript data source. The datais returned from an ajax call to nodejs which queries SQL Server DB table and returns 2 columns, both numerical data. I'm adding 2 more columns to hold input fields, with default value of 0, for the user to enter numbers that will increase/decrease the values found in ColumnA/B.
我正在生成一个带有 javascript 数据源的 DataTable。该数据是从一个AJAX调用其中的NodeJS查询SQL Server数据库表，然后返回两列，两数值数据返回。我再添加 2 列来保存输入字段，默认值为 0，供用户输入将增加/减少在 ColumnA/B 中找到的值的数字。
$('#mytable').DataTable( {
"data": data,
"columns": [
{ "data": "ColumnA", "defaultContent": "NA" },
{ "data": "ColumnB", "defaultContent": "NA" },
{ "data": undefined, "defaultContent": '<input type="text" value="0" size="10"/>'},
{ "data": undefined, "defaultContent": '<input type="text" value="0" size="10"/>'}
]
});
This renders just fine and I can modify the text in the input field in the cell. There is a separate input field outside the table that the user can click to 'submit changes', which calls a javascript function that will read those input fields of the table. However, I cannot figure out how to get them. Using:
这呈现得很好，我可以修改单元格输入字段中的文本。表格外有一个单独的输入字段，用户可以单击以“提交更改”，该字段会调用一个 javascript 函数来读取表格的这些输入字段。但是，我无法弄清楚如何获得它们。使用：
var aTable = $('#mytable').DataTable();
var colAchange = atable.cell(0, 2).data();
var colBchange = atable.cell(0, 3).data();
Both colA/Bchange vars just have the 'input type="text" ...' html text, not the value of the input field. This does make sense, but I cannot find the right way to read the value of the input field. At one time I had read in the Datatables docs that you can add 'meta' data to the row data. Do I need to do that to get an "id" on that element and query the element by that? Otherwise how do I get that input's value?
colA/Bchange 变量都只有 'input type="text" ...' html 文本，而不是输入字段的值。这确实有道理，但我找不到读取输入字段值的正确方法。有一次，我在 Datatables 文档中读到，您可以将“元”数据添加到行数据中。我是否需要这样做才能在该元素上获取“id”并通过该元素查询该元素？否则我如何获得该输入的值？
回答by davidkonrad
If you just want to extract the values entered in the input boxes, you mustgo through jQuery or native DOM. dataTables itself is not aware of any changes made to form input fields, so trying to retrieve the values by cell().data()will never work, with or without id's / orthogonal data :
如果只想提取输入框中输入的值，则必须通过 jQuery 或原生 DOM。dataTables 本身不知道对表单输入字段所做的任何更改，因此cell().data()无论是否使用id's / 正交数据，尝试通过以下方式检索值都将无法正常工作：
aTable.cell(0,2).nodes().to$().find('input').val()
aTable.cell(0,3).nodes().to$().find('input').val()
Will give you the current value of the various inputs. Have replicated your above scenario 100% in this fiddle -> http://jsfiddle.net/obmghyo7/
将为您提供各种输入的当前值。在这个小提琴中 100% 复制了你的上述场景 -> http://jsfiddle.net/obmghyo7/
This is basically also how the official documentation suggests a way to extract values from form inputs -> https://datatables.net/examples/api/form.html
这基本上也是官方文档如何建议从表单输入中提取值的方法-> https://datatables.net/examples/api/form.html
If you want to perform filtering / searches within the table, which also includes changes made by the user in form inputs, then it is a little more tricky -> JQuery Datatables search within input and select(mine, but I dont know any better answer)
如果您想在表中执行过滤/搜索，其中还包括用户在表单输入中所做的更改，那么它会有点棘手 - > JQuery Datatables 在输入和选择中搜索（我的，但我不知道更好的答案)
回答by Max Voisard
I have a sort of hackish yet applicable and simple solution. The thing to note is my code DOES allow usage of the DataTables data()method and also that this is more of a solution for anybody receiving HTML code instead of inner text from each cell of a row, rather than trying to get the value of an inputtext box. The row clicked on returns an array through data(). Each cell of the row is wrapped in a spanso any plaintext/non-HTML strings inside a tdcan be rendered as HTML elements and therefore be recognized by the jQuery text()method:
我有一种骇人听闻但适用且简单的解决方案。需要注意的是我的代码确实允许使用 DataTablesdata()方法，而且对于任何接收 HTML 代码而不是从一行的每个单元格接收内部文本的人来说，这更像是一种解决方案，而不是尝试获取input文本框的值. 单击的行通过 返回一个数组data()。该行的每个单元格都包含在 a 中，span因此a 中的任何纯文本/非 HTML 字符串td都可以呈现为 HTML 元素，因此可以被 jQuerytext()方法识别：
$('#mytable tbody').on('click', 'tr', function (e) {
var rowArray = aTable.row(this).data();
var colAchange = $('<span/>').html(rowArray[0]).text();
var colBchange = $('<span/>').html(rowArray[1]).text();
});
JSFiddle: https://jsfiddle.net/nyv7j6h8/
JSFiddle：https://jsfiddle.net/nyv7j6h8/
