[英]Resize html table by adding removing rows and columns dynamically?
我希望能够从html表中添加删除行列(也就是调整其大小)
该表格应为矩形,稍后将表示一些2D数组值。
由于该表将被刷新很多次,并且可能会变大,因此我认为清空并再次填充它不是一个好的解决方案。
我考虑过重新调整我现在拥有的单元格的大小,并在处理新单元格之前清除以前编辑的单元格。
我的问题是调整大小,我可以想到一些解决方案,方法是遍历行并添加删除单元格,然后添加删除行,但是我问是否有使用js或jQuery来完成此工作的现成解决方案,或者至少添加删除列?
样品台(5x3)
<table class="table-editor" id="table1">
<colgroup class=""></colgroup>
<colgroup class=""></colgroup>
<colgroup class=""></colgroup>
<colgroup class=""></colgroup>
<colgroup class=""></colgroup>
<tbody>
<tr class="highlighted-row">
<td>•</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="normal-row">
<td></td>
<td>•</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="normal-row">
<td></td>
<td></td>
<td>•</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
这是一个例子。 在这里工作jsFiddle
我在表格下方添加了按钮以开始播放:
<input id="addcol" type="button" value="Add Column" />
<input id="remcol" type="button" value="Reomve Column" />
<input id="addrow" type="button" value="Add row" />
<input id="remrow" type="button" value="Remove row" />
jQuery / Javascript:
$(document).ready(function() {
$('#addcol').click(function() {
var $tablerow = $('table.table-editor').find('tr');
count = 0;
$tablerow.each(function(index, value){
count += 1;
//alert('Working on row: ' + count);
var $listitem = $(this);
//alert('ListItem: ' + $listitem.index());
n = parseInt($listitem.index());
//alert('Value of n: ' + n);
var $newRow = $("<td>" + n + "</td>");
$("table.table-editor tr:eq(" + n + ")").append($newRow);
});
});
$('#remcol').click(function() {
var $tablerow = $('table.table-editor').find('tr');
$tablerow.each(function(index, value){
$("table.table-editor tr:eq("+index+") td:eq(-1)").remove();
});
});
$('#addrow').click(function() {
$('table.table-editor').append("<tr></tr>");
$('table.table-editor tr:eq(0) td').each(function(index, value){
$("table.table-editor tr:eq(-1)").append("<td>"+index+"</td>");
});
});
$('#remrow').click(function() {
$('table.table-editor tr:eq(-1)').remove();
});
}); //END $(document).ready()
另一种删除列的方法是,允许您删除表中的任何列。
HTML:
<h1>Add/Remove Column Example:</h1>
<span class="blurb">Instructions:<br/>1. Click Add Column button to append table to end.<br />2. Click <span class="remove">rem</span> to remove THAT column. <br />3. Code is currently set to COLORIZE rather than remove, just adjust in code and click RUN button at top left.</span><br/><br/>
<table class="table-editor" id="table1">
<colgroup class=""></colgroup>
<colgroup class=""></colgroup>
<colgroup class=""></colgroup>
<colgroup class=""></colgroup>
<colgroup class=""></colgroup>
<tbody>
<tr class="highlighted-row">
<td>•</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="normal-row">
<td></td>
<td>•</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="normal-row">
<td></td>
<td></td>
<td>•</td>
<td></td>
<td></td>
</tr>
<tr class="normal-row">
<td class='remove'>rem</td>
<td class='remove'>rem</td>
<td class='remove'>rem</td>
<td class='remove'>rem</td>
<td class='remove'>rem</td>
</tr>
</tbody>
</table>
<input id="addcol" type="button" value="Add Column" />
jQuery代码:
$('#addcol').click(function() {
var $tablerow = $('table.table-editor').find('tr');
count = 0;
$tablerow.each(function(index, value){
count += 1;
//alert('Working on row: ' + count);
var $listitem = $(this);
//alert('ListItem: ' + $listitem.index());
n = parseInt($listitem.index());
//alert('Value of n: ' + n);
if (n == 3) {
var $newRow = $("<td class='remove'>rem</td>");
$("table.table-editor tr:eq(" + n + ")").append($newRow);
}else{
var $newRow = $("<td>" + n + "</td>");
$("table.table-editor tr:eq(" + n + ")").append($newRow);
}
});
});
$(document).on('click', 'td.remove', function() {
var ndx = $(this).index() + 1;
//alert('Val of ndx: ' + ndx);
$('td:nth-child(' +ndx+ ')').css('background-color','red'); //comment this line to remove (see next line)
//$('td:nth-child(' +ndx+ ')').remove(); //UNCOMMENT this line to remove (see prev line)
});
如果要删除行,只需删除tr标记即可。 如果要删除列,则要复杂一些。 您必须删除例如。 在所有tr标签中,第一个td标签。 但是,使用jQuery并不难。 您可以使用eq选择器,例如$('#table1 tr td:eq(0)')
来访问每个第一个td,从而删除该列。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.