the code below allows reordering of table rows (moving a row up or down)
for some reason, the following code in IE11 allows changing the header row as well , although i specified "tbody tr:first" as my filter
what am I doing wrong?
function upAction(){
var row = $("input[name='select_radio']:checked").parents("tbody tr:first");
row.insertBefore(row.prev());
}
function downAction(){
var row = $("input[name='select_radio']:checked").parents("tbody tr:first");
row.insertAfter(row.next());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button onclick="upAction()">Up</button>
<button onclick="downAction()">down</button>
<table >
<tr>
<th>Printer</th>
<th>Printer ID</th>
<th>Printer Description</th>
</tr>
<tbody>
<tr>
<td><input type="radio" name="select_radio"/></td>
<td>x300</td>
<td>3</td>
<td>new printer installed in 3th floor</td>
</tr>
<tr>
<td><input type="radio" name="select_radio"/></td>
<td>x400</td>
<td>5</td>
<td>laser printer</td>
</tr>
<tr>
<td><input type="radio" name="select_radio"/></td>
<td>Office jet 3</td>
<td>6</td>
<td>old student printer</td>
</tr>
</tbody>
</table>
Related
How can I delete specific table rows by giving up the row number in an input field?
The table I want to target: Complete code is linked below.
<table id="uitvoertabel" border="1">
<tr>
<th></th>
<th>Voornaam</th>
<th>Achternaam</th>
<th>Aantal punten</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Cruijff</td>
<td>54</td>
</tr>
<tr>
<td>2</td>
<td>Frans</td>
<td>Bauer</td>
<td>47</td>
</tr>
<tr>
<td>3</td>
<td>Selah</td>
<td>Sue</td>
<td>93</td>
</tr>
</table>
This is the complete code: https://jsfiddle.net/c6oLf8ye/1/
Pass the row number you want to delete like 0,1,2,3...
document.getElementById("uitvoertabel").deleteRow(0);
updated the same in: https://jsfiddle.net/3v2rdbmt/
Assuming this table (actually it could have more columns and rows):
<table id="vehicles">
<tr>
<th>Type</th>
<th>Color</th>
<th>Wheels</th>
</tr>
<tr>
<td>Car</td>
<td>Red</td>
<td>4</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Bike</td>
<td>Blue</td>
<td>2</td>
</tr>
<tr>
<td>Car</td>
<td>Blue</td>
<td>4</td>
</tr>
<tr>
<td>Bike</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Red</td>
<td>2</td>
</tr>
</table>
Now my goal is to be able to click on the table data (cells), for example "Car", and then show only the two cars. Another click on "Car" should show the hole table again. Or one click on "Red", and then only the red vehicles (red car and red motorcycle) should be shown. How can this be achieved using jQuery?
$(function () {
$( "td" ).on( "click", function() {
var type = $(this).text();
$('td:first-child').parent('tr:not(:contains('+type+'))').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="vehicles">
<tr>
<th>Type</th>
<th>Color</th>
<th>Wheels</th>
</tr>
<tr>
<td>Car</td>
<td>Red</td>
<td>4</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Bike</td>
<td>Blue</td>
<td>2</td>
</tr>
<tr>
<td>Car</td>
<td>Blue</td>
<td>4</td>
</tr>
<tr>
<td>Bike</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Red</td>
<td>2</td>
</tr>
</table>
Stores the text from current td, hides tr nodes which do not contain the text.
Here's a really really simple test that might help you get started.
$(function () {
$("#vehicles tr td").click(function () {
var desc = $(this).html();
$("#vehicles tr").css("background-color", "white");
$("#vehicles").find(":contains(" + desc + ")").closest("tr").css("background-color", "red");
});
});
This assigns a click event to every TD element, stores its value somewhere and then checks if said value exists in the table, highlighting the elements that are matched. Give it a spin, I think it'll set you off in the right direction.
I'm working in asp.net, visual basic.
I need to create html table inside a table.
I need to create all through server side.
The table will be with 6 cols and n rows. in the last col (more data) will be a link, and when clicking on that link (let say on row2) it will expand the specific row and show another table with 5 cols and m rows
clicking on that link again will close the row and hide the inside table.
For now I just try to do it in the client side, a little example to me, but I'm stuck.
I have this for now:
<div id="shutfuyotTable">
<table class="tblShutaf" dir="rtl" runat="server">
<thead>
<tr>
<td>num</td>
<td>name</td>
<td>sum1</td>
<td>sum2</td>
<td>notes</td>
<td>moreData</td>
</tr>
</thead>
<tbody>
<tr>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<tr>
<td colspan="5">
<table id="Table1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
<tr>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<tr>
<td colspan="5">
<table id="Table2">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<tr>
<td colspan="5">
<table id="Table3">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</td>
</tr>
</tr>
</tbody>
</table>
</div>
In the css I put row1 (id) as display: none;
I'm not manage to do the javascript, that when I'm clicking on the link it will show or hide the table.
What do I need to add in this code (Maybe onClick function?!?)
and what I need to do in javascript?
I need to drag and drop table rows by selecting desired rows from on table to another table. First provide option to select needed rows from one table and then all the selected rows need to be drag and drop into some other table.
I have done the sample to drag and drop single row from on table to another. Find the below code:
html:
<div id="table1" class="bitacoratable">
<table>
<thead>
<tr>
<th>ID</th>
<th>ClassName</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Class 1</td>
</tr>
<tr class="childrow">
<td collspan = "2" >
<table class="childgrid">
<tr class="draggable_tr">
<td>1</td>
<td>Student 1</td>
</tr>
<tr class="draggable_tr">
<td>2</td>
<td>Student 2</td>
</tr>
<tr class="draggable_tr">
<td>3</td>
<td>Student 3</td>
</tr>
<tr class="draggable_tr">
<td>4</td>
<td>Student 4</td>
</tr>
<tr class="draggable_tr">
<td>5</td>
<td>Student 5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Class 2</td>
</tr>
<tr class="childrow">
<td collspan = "2">
<table class="childgrid">
<tr class="draggable_tr">
<td>6</td>
<td>Student 6</td>
</tr>
<tr class="draggable_tr">
<td>7</td>
<td>Student 7</td>
</tr>
<tr class="draggable_tr">
<td>8</td>
<td>Student 8</td>
</tr>
<tr class="draggable_tr">
<td>9</td>
<td>Student 9</td>
</tr>
<tr class="draggable_tr">
<td>10</td>
<td>Student 10</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="table2" class="bitacoratable">
<table>
<thead>
<tr>
<th>ID</th>
<th>ClassName</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Class 1</td>
</tr>
<tr class="childrow">
<td>
<table class="childgrid">
<tr class="draggable_tr">
<td>1</td>
<td>Student 1</td>
</tr>
<tr class="draggable_tr">
<td>2</td>
<td>Student 2</td>
</tr>
<tr class="draggable_tr">
<td>3</td>
<td>Student 3</td>
</tr>
<tr class="draggable_tr">
<td>4</td>
<td>Student 4</td>
</tr>
<tr class="draggable_tr">
<td>5</td>
<td>Student 5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Class 2</td>
</tr>
<tr class="childrow">
<td>
<table class="childgrid">
<tr class="draggable_tr">
<td>6</td>
<td>Student 6</td>
</tr>
<tr class="draggable_tr">
<td>7</td>
<td>Student 7</td>
</tr>
<tr class="draggable_tr">
<td>8</td>
<td>Student 8</td>
</tr>
<tr class="draggable_tr">
<td>9</td>
<td>Student 9</td>
</tr>
<tr class="draggable_tr">
<td>10</td>
<td>Student 10</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Script:
$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
$(this).css('opacity', '.5');
},
stop: function (event, ui) {
$(this).css('opacity', '1');
}
});
$("#table1 .childgrid, #table2 .childgrid").droppable({
drop: function (event, ui) {
$(ui.draggable).appendTo(this);
}
});
$(document).on("click", ".childgrid tr", function () {
$(this).addClass("selectedRow");
});
CSS:
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
.bitacoratable {
height: 400px;
overflow-y: auto;
width: 220px;
float:left;
}
#table1 {
margin-right: 100px;
}
.selectedRow {
background-color: #E7E7E7;
cursor: move;
}
How to do it for mutilple rows?
Regards,
Karthik.
You could use draggable's helper function. There's a nice implementation here.
Here's how it looks using the above as a guideline for your particular code:
JsFiddle Demonstration:
Explanation of what's going on:
(1) If there's only one selected, then we'll just treat this as a single drag and drop. Because it was not clicked yet (mouse holding down and dragging right away), we'll manually add the selectedRow class to ensure it gets properly removed from its original location.
(selected.length === 0) {
selected = $(this).addClass('selectedRow');
}
(2) Make a temporary container to store all the rows as one unit, as if we were dragging one item.
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone().removeClass("selectedRow"));
return container;
(3) You can modify the CSS so that we're always clicking on the items before it shows the move cursor. I already did, but feel free to change it as you like.
(4) Now we append all the table rows in our temporary divider into the .childgrid we chose to drop into and remove all elements that originally were selected.
$("#table1 .childgrid, #table2 .childgrid").droppable({
drop: function (event, ui) {
$(this).append(ui.helper.children());
$(this) is what we chose, and we're appending the elements inside our temporary divider that the helper returns, which are the table rows.
$('.selectedRow').remove();
}
Now to get rid of those table rows that we selected earlier.
});
Let me know if there are any bugs and I'll try my best to sort them out. It works on my end. Since you can highlight the text in the table rows, there could possibly be some issues if you drag and drop too fast and you're highlighting text rather than selecting the row itself.
I have 4 tables with about a hundred rows in each table. Each table has its own unique ID (ABC1, ABC2, etc) and each row of each table row has its own unique ID (ABC1-Val1, ABC1-Val2, etc). Each of the rows has its own checkbox (with its own unique name).
I am looking for a piece of JavaScript (possibly working with jQuery) that will work from a button click which, when clicked, the will display only the rows of the tables that have been selected. [Possibly include a remove filtering too].
Thinking out loud - I could use a span with a hidden element toggled between 0 and 1 if the checkbox is unchecked/checked.
Can anyone shed some slight on how to achieve this please?
Possibly something like this?
http://jsfiddle.net/HegPJ/2/
html:
<table border="1" id="tableId1">
<thead>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody>
</table>
<hr/>
<input type="button" value="Filter" id="filterButt"/>
<input type="button" value="Reset" id="resetButt"/>
JS:
$('#filterButt').click(function(){
$('#tableId1 tbody').find('tr:not(:has(:checkbox:checked))').hide();
});
$('#resetButt').click(function(){
$('#tableId1').find('tr').show();
$('#tableId1 input:checkbox').removeAttr('checked');
});
This should work fine:
<div>
<button type="button" id="filterTablesbtn">Filter</button>
<button type="button" id="clearFilterbtn">Clear Filter</button>
</div>
ABC1
<table id="ABC1">
<tr>
<td>Test</td><td><input type="checkbox"/></td>
</tr>
<tr>
<td>Test 2</td><td><input type="checkbox" /></td>
</tr>
</table>
ABC2
<table id="ABC2">
<tr>
<td>Test</td><td><input type="checkbox"/></td>
</tr>
<tr>
<td>Test 2</td><td><input type="checkbox" /></td>
</tr>
</table>
ABC3
<table id="ABC3">
<tr>
<td>Test</td><td><input type="checkbox"/></td>
</tr>
<tr>
<td>Test 2</td><td><input type="checkbox"/></td>
</tr>
</table>
window.onload = function()
{
$('#filterTablesbtn').click(function(){
filterTable('ABC1');
filterTable('ABC2');
});
$('#clearFilterbtn').click(function(){
clearFilter('ABC1');
clearFilter('ABC2');
});
}
function filterTable(id)
{
$('#' + id + ' tr').each(function(){
if($(this).find('input[type=checkbox]').is(":checked"))
$(this).hide();
});
}
function clearFilter(id)
{
$('#' + id + ' tr').show();
}
See the fiddle here:
http://jsfiddle.net/SpAm/pSzk7/