Loading...

Search jQuery

Search

jQuery Forum

Getting Started

fy2c

Control table with slider

in Getting Started • 3 months ago

Hi, I am new to jQuery and I am trying to control the table's column with a slider, the only problem I am having now is to delete the number of columns that exceeds the slider values without affecting the fixed columns. Any advise or help on pointing me to the right direction will be greatly appreciated.

<table id="table1" border="1">
<thead>
<tr>
<td>Fixed columns</td>
<td>columns</td>
<td>Fixed columns</td>
</tr>
</thead>
<tbody>
<tr>
<td>Fixed columns </td>
<td>column 2</td>
<td>Fixed columns </td>
</tr>
</tbody>
</table>

I have tried using the same method to select the <td> and remove the columns as shown in the script below but nothing have worked out so far.

function controlcol(){
var a = 1; //column to start appending (index)
var f = 2; //number of fixed column
var b = $( "#dropdownlist" ).val();
var c = $( "#table1 tr:first td").length;
var d = $( "#table1 tr").length;
var e = "<td>Added column</td>";;
//remove added column
for(var g = b; g < c-f; g++){
}
//add columns... per row
for(var i = c - f; i<b; i++){
for ( var x=1; x<d; x++){
$("#table1 tr:eq(" + x + ") td:eq(" + a + ")").after(e);
}
}
//add first row
for(var z = c-f; z < b; z++){
$("#table1 tr:eq(0) td:eq(" + a + ")").after("<td>Column</td>");
}
};

1

Replies(2)

Re: Control table with slider

3 months ago

be a lot easier if you added a "fixed column" class

<td class="fixed">Fixed columns</td>

<td>columns</td>

<td class="fixed">Fixed columns</td>

$('tr').each(function(){

var $notFixed=$(this).find('td').not('.fixed'); // create object of not fixed elements

$notFixed.filter(':last').remove() // remove last td using filter() method

$notFixed.eq(-2).remove()// remove second last using eq() method

$notfixed.eq(-1).after('<td>New element</td>') // add td after last "not fixed"

})

Fy2c

Re: Control table with slider

3 months ago

Thank you charlietfl I have learnt a lot from this, also it works nicely.

Here is the update for adding columns

for(var i = c-f; i < b; i++){
$('#table1 tr:not(#table1 tr:first)').each(function(){
var fixed = $(this).find('td').not('.fixed');
fixed.filter(':last').after("<td></td>")
var headingFixed = $("#table1 tr:eq(0)").find('td').not('.fixed');
headingFixed.filter(':last').after("<td>Heading</td>")
});
}