如何在使用数据表加载页面时为所有行和列动态添加复选框？
Posted
技术标签:
【中文标题】如何在使用数据表加载页面时为所有行和列动态添加复选框？【英文标题】：How to add a checkbox dynamically for all rows and columns while page onload with Datatables? 【发布时间】：2017-12-21 23:14:28 【问题描述】：在加载数据表时，我需要在所有行和列标题中添加复选框。
这是 html 代码
<body>
<c:if test="$not empty table">
$table
</c:if>
</body>
<script>
$(document).ready(function()
$('#sheet_0').DataTable();
var container = $('#sheet_0');
var rowSize = $('table#sheet_0 tr').length
alert(rowSize);
for (var r = 0; r < rowSize; r++)
$('<input />',
type : 'checkbox',
id : 'cb' + id,
value : name
).appendTo('tr');
);
</script>
我已经完成了上面的复选框未加载。 通过读取 Xlsx 文件加载表格并加载到 HTML 中
使用 spring 我在模型属性中设置了表格内容，并在 html 中设置了视图。
<table border="1" cellpadding="2" cellspacing="0" id="sheet_0" style="border-collapse: collapse;">
<tr>
<td class="td_0_1"> </td><td class="td_0_1"> </td><td class="td_0_1"> </td><td class="td_0_1"> </td><td class="td_0_1" colspan="3">Seguros Generales</td><td class="td_0_1"> </td><td class="td_0_1"> </td><td class="td_0_1"> </td><td class="td_0_1"> </td><td class="td_0_1"> </td><td class="td_0_1" colspan="3">Seguros de Personas</td><td class="td_0_1"> </td><td class="td_0_1"> </td><td class="td_0_1"> </td><td class="td_0_1" rowspan="2">Total general</td>
</tr>
<tr>
<td class="td_0_2">Modalidad</td><td class="td_0_2">Ramo</td><td class="td_0_2">LBC-G</td><td class="td_0_2">CRI-G</td><td class="td_0_2">ILL-G</td><td class="td_0_2">ALI-G</td><td class="td_0_3">BIS-G</td><td class="td_0_3">FOR-G</td><td class="td_0_3">LAT-G</td><td class="td_0_2">TOT. SG</td><td class="td_0_3">BUP-P</td><td class="td_0_2">LVI-P</td><td class="td_0_2">LBC-P</td><td class="td_0_3">PRO-P</td><td class="td_0_3">NAL-P</td><td class="td_0_3">ALI-P</td><td class="td_0_3">CRDI-P</td><td class="td_0_2">TOT. SP</td>
</tr>
<tr>
<td class="td_0_2"> </td><td class="td_0_2"> </td><td class="td_0_2"> </td><td class="td_0_2"> </td><td class="td_0_2"> </td><td class="td_0_2"> </td><td class="td_0_3"> </td><td class="td_0_3"> </td><td class="td_0_3"> </td><td class="td_0_2"> </td><td class="td_0_3"> </td><td class="td_0_2"> </td><td class="td_0_2"> </td><td class="td_0_3"> </td><td class="td_0_3"> </td><td class="td_0_3"> </td><td class="td_0_3"> </td><td class="td_0_2"> </td><td class="td_0_2"> </td>
</tr>
<tr>
<td class="td_0_2">Seguros Generales</td><td class="td_0_2">Incendio</td><td class="td_0_3">0.0</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">0.0</td><td class="td_0_3">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_2">-</td><td class="td_0_2">0.0</td>
</tr>
<tr>
<td class="td_0_2"> </td><td class="td_0_2">Robo</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_2">-</td><td class="td_0_3">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_2">-</td><td class="td_0_2">-</td>
</tr>
<tr>
<td class="td_0_2"> </td><td class="td_0_2">Transportes</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_2">-</td><td class="td_0_3">-</td><td class="td_0_4">-</td><td class="td_0_4">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_3">-</td><td class="td_0_2">-</td><td class="td_0_2">-</td>
</tr>
<tr>
<table>
【问题讨论】：
请重新格式化您的源代码，这样水平滚动条就会消失。 Id 从何而来？您的代码中缺少它 其实一个tr里面有这么多td，所以就这样来了 Id 来自我将 xlsx 转换为 html 的 Java 类，如下所示 Element table = htmlDocumentFacade.createTable(); int sIndex = sheet.getWorkbook().getSheetIndex(sheet); String sId = "sheet_".concat(String.valueOf(sIndex)); table.setAttribute("id", sId); table.setAttribute("边框", "1"); table.setAttribute("cellpadding", "2"); table.setAttribute("cellspacing", "0"); table.setAttribute("style", "border-collapse:collapse;"); @ShankaraNethranS.N 据我了解您的代码：您将复选框附加到 tr 元素，而不是 td 元素。所以难怪，为什么你看不到任何复选框。 【参考方案1】：根据我在 jsfiddle 的尝试，试试这个：
$(document).ready(function()
$('#sheet_0').DataTable();
var id = 0;
//Look for the table and tbody to find all table rows ('tr')
$('table#sheet_0 tbody tr').each(function()
//Take each founded table row to look for columns ('td')
$(this).find('td:first').each(function()
//Take each founded column and append a checkbox
$('<input />',
type : 'checkbox',
id : 'cb' + id,
value : name
).appendTo($(this));
id++;
);
);
);
此代码示例将一个复选框添加到第一列。
上面的例子是一个普通的 html 表，没有 th 标签：
$(document).ready(function()
$('#sheet_0').DataTable();
var id = 0;
var tableRows = $('table#sheet_0 tr');
for (i = 0; i < $(tableRows).length; i++)
//Skip first table row
if (i > 0)
//Take each founded table row to look for columns ('td')
$(tableRows).get(id).find('td:first').each(function()
//Take each founded column and append a checkbox
$('<input />',
type : 'checkbox',
id : 'cb' + id,
value : name
).appendTo($(this));
id++;
);
);
【讨论】：
未附加复选框 是的记者复选框现在已被附加，但我需要它在每个 TR 的第一个 TD 中完成，并且应该转换为数据表 @ShankaraNethranS.N 查看我的编辑。重要！：您的 html 中有一些奇怪的错误，因此插件本身不会创建您期望的数据表。请仔细阅读手册。我通过使用网站上的示例表解决了这个问题。提示：您必须将thead 和tbody 添加到您的表中。您的代码中还有其他一些错误。
由于我将整个 Excel 文件转换为 Html 表，因此不需要任何主题，[动态发生]。所以到目前为止，我需要在表格的新行中使用复选框而不是表格标题，因此每个 td 的大小进入 tr
@ShankaraNethranS.N 插件需要它来创建数据表。查看说明。【参考方案2】：
为此，您需要在数据表初始化中添加回调：
var options = [];
options.drawCallback = function(stgs)
//you can loop all table with foreach loop if you won't loop replace $(this)
$(this).find("td:first-child").html("<input type='checkbox' value='sth' />");
;
$("#table_id").DataTable(options);
【讨论】：
【参考方案3】：您可以使用Checkboxes jQuery DataTables 插件。
例如：
var table = $('#example').DataTable(
'columnDefs': [
'targets': 0,
'checkboxes': true
],
'order': [[1, 'asc']]
);
有关代码和演示，请参阅Checkboxes 插件页面和this example。
【讨论】：
实际上在阅读xlsx文件后，我会得到一个HTML，因为我单独选择表格并在pageLoad上转换为数据表，完成上述操作后仍然无法加载列中的复选框数据表的，可能是什么问题，如果我错了，请纠正我以上是关于如何在使用数据表加载页面时为所有行和列动态添加复选框？的主要内容，如果未能解决你的问题，请参考以下文章