JQuery table filter : Multifilter - javascript

$('.filterable .filters input').keyup(function(e) {
/* Ignore tab key */
var code = e.keyCode || e.which;
if (code == '9') return;
/* Useful DOM data and selectors */
var $inputs = $('.filters input');
var $input = $(this),
inputContent = $input.val().toLowerCase(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.table'),
$rows = $table.find('tbody tr');
// $rows.show();
/*reset = false;
if (code == 8 || code == 46) {
$rows.show();
reset = true
}*/
$.each($inputs, function(key, elem) {
value = $(elem).val().toLowerCase();
$rows.filter(function() {
if (value.length > 0 && column == (key + 1)) {
var col_value = $(this).find('td').eq(key + 1).text().toLowerCase();
if (col_value.indexOf(value) === -1) {
$(this).hide();
} /*else if (reset && col_value.indexOf(value) > -1) {
$(this).show();
}*/
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="panel panel-primary filterable" style="width:1500px;">
<div class="panel-heading" id="list_heading"><table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr class="filters">
<th class="thead"><label id="list_header_action">#
</label></th>
<th class="thead"><input type="text" class="form-control" id="list_head_projectname"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_cardtype"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_cardtype"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_creationdate"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_creationdate"></th>
<th class="thead"><label id="list_header_action">ACTION</label></th>
</tr>
</thead>
<tbody>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_2" name="row_check" value="2"></td>
<td> Advait</td>
<td>#home</td>
<td>JACKSON</td>
<td>2017-06-23</td>
<td>Channel,Decision My Loan,Help Me Transition</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/2">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr>
<td><input type="checkbox" id="id_6" name="row_check" value="6"></td>
<td> aslj sd wildfm wep</td>
<td>Campaign</td>
<td>PARTNER</td>
<td>2017-06-23</td>
<td>Assist Me with Options,Channel,Help Me Find a Solution</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/6">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_3" name="row_check" value="3"></td>
<td> gfg hkj;h oi uvmvgh</td>
<td>Campaign</td>
<td>MCCLAIN</td>
<td>2017-06-23</td>
<td>Capital Markets,Decision My Loan,Help Me Transition</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/3">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_4" name="row_check" value="4"></td>
<td> jhgj gklk; mn nbvg tfc kg hj</td>
<td>Campaign</td>
<td>PARTNER:OPEN</td>
<td>2017-06-23</td>
<td>Decision My Loan,Help Me Transition,Manage My Loan</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/4">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_1" name="row_check" value="1"></td>
<td> Kishor</td>
<td>#home</td>
<td>DICKEY</td>
<td>2017-06-23</td>
<td>Decision My Loan,Internal Customer</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/1">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_7" name="row_check" value="7"></td>
<td> ksld laksdj oiweiom</td>
<td>#home</td>
<td>PARTNER:PALAZZO</td>
<td>2017-06-23</td>
<td>Capital Markets,Channel,Decision My Loan</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/7">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_5" name="row_check" value="5"></td>
<td> lkjhkj gy f ftyroutybch hg fl</td>
<td>#home</td>
<td>DICKEY</td>
<td>2017-06-23</td>
<td>Channel,Decision My Loan,Help Me Transition</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/5">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
I have above html and js. I want to implement table filter based on the multiple values from multiple columns. I am able to filter the rows when the characters are entered into column header, but not able to do the same when characters are deleted.
I add display : none to non matching rows, while characters are entered, and not able to display them back when characters are deleted.

To resolve this issue, please add below line in your code.
$rows.show();
Add this code before applying filter option.
You can add after this block.
inputContent = $input.val().toLowerCase(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.table'),
$rows = $table.find('tbody tr');
$('.filterable .filters input').keyup(function(e) {
/* Ignore tab key */
var code = e.keyCode || e.which;
if (code == '9') return;
/* Useful DOM data and selectors */
var $inputs = $('.filters input');
var $input = $(this),
inputContent = $input.val().toLowerCase(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.table'),
$rows = $table.find('tbody tr');
$rows.show();
/*reset = false;
if (code == 8 || code == 46) {
$rows.show();
reset = true
}*/
$.each($inputs, function(key, elem) {
value = $(elem).val().toLowerCase();
$rows.filter(function() {
if (value.length > 0) {
var col_value = $(this).find('td').eq(key + 1).text().toLowerCase();
if (col_value.indexOf(value) === -1) {
$(this).hide();
} /*else if (reset && col_value.indexOf(value) > -1) {
$(this).show();
}*/
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="panel panel-primary filterable" style="width:1500px;">
<div class="panel-heading" id="list_heading"><table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr class="filters">
<th class="thead"><label id="list_header_action">#
</label></th>
<th class="thead"><input type="text" class="form-control" id="list_head_projectname"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_cardtype"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_cardtype"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_creationdate"></th>
<th class="thead"><input type="text" class="form-control" id="list_head_creationdate"></th>
<th class="thead"><label id="list_header_action">ACTION</label></th>
</tr>
</thead>
<tbody>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_2" name="row_check" value="2"></td>
<td> Advait</td>
<td>#home</td>
<td>JACKSON</td>
<td>2017-06-23</td>
<td>Channel,Decision My Loan,Help Me Transition</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/2">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr>
<td><input type="checkbox" id="id_6" name="row_check" value="6"></td>
<td> aslj sd wildfm wep</td>
<td>Campaign</td>
<td>PARTNER</td>
<td>2017-06-23</td>
<td>Assist Me with Options,Channel,Help Me Find a Solution</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/6">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_3" name="row_check" value="3"></td>
<td> gfg hkj;h oi uvmvgh</td>
<td>Campaign</td>
<td>MCCLAIN</td>
<td>2017-06-23</td>
<td>Capital Markets,Decision My Loan,Help Me Transition</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/3">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_4" name="row_check" value="4"></td>
<td> jhgj gklk; mn nbvg tfc kg hj</td>
<td>Campaign</td>
<td>PARTNER:OPEN</td>
<td>2017-06-23</td>
<td>Decision My Loan,Help Me Transition,Manage My Loan</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/4">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_1" name="row_check" value="1"></td>
<td> Kishor</td>
<td>#home</td>
<td>DICKEY</td>
<td>2017-06-23</td>
<td>Decision My Loan,Internal Customer</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/1">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_7" name="row_check" value="7"></td>
<td> ksld laksdj oiweiom</td>
<td>#home</td>
<td>PARTNER:PALAZZO</td>
<td>2017-06-23</td>
<td>Capital Markets,Channel,Decision My Loan</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/7">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
<tr style="display: table-row;">
<td><input type="checkbox" id="id_5" name="row_check" value="5"></td>
<td> lkjhkj gy f ftyroutybch hg fl</td>
<td>#home</td>
<td>DICKEY</td>
<td>2017-06-23</td>
<td>Channel,Decision My Loan,Help Me Transition</td>
<td>
<a id="todo_edit" class="btn btn-sm btn-default" href="/5">
<span class="glyphicon glyphicon-edit"></span>
Edit</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>

Related

jQuery dataTable error Cannot read property 'mData' of undefined

I have following dataTable which has 6 columns.
After rendering the table I am initializing .DataTable(). But getting the error:
'mData' of undefined TypeError: Cannot read property 'mData' of undefined
As mentioned in few of the posts , I have added tfoot but still have the error.
$(document).ready(function() {
$('#pTable').DataTable();
});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="pTable" class="display" style="width:100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>NOK</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy1</td>
<td class="text-muted" data-bind="text: NOK">SomeOne</td>
<td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">true</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy2</td>
<td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
<td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">false</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Status</th>
<th>Name</th>
<th>Patients</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</tfoot>
</table>
You had 6 ths but had 7 tds in both of the rows. The number of th must match with the number of td. Adding a hidden th fixed it
$(document).ready(function() {
$('#pTable').DataTable();
});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="pTable" class="display" style="width:100%">
<thead>
<tr>
<th style="display:none"></th>
<th>Status</th>
<th>Name</th>
<th>NOK</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy1</td>
<td class="text-muted" data-bind="text: NOK">SomeOne</td>
<td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">true</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy2</td>
<td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
<td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">false</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Status</th>
<th>Name</th>
<th>Patients</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</tfoot>
</table>
Number of headers thead tr th and number of cells in the tbody tr td should be same in each row(Same with the footer too). Once you do this this error will be removed.
'<table id="pTable" class="display" style="width:100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>NOK</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
<th>Some Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy1</td>
<td class="text-muted" data-bind="text: NOK">SomeOne</td>
<td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">true</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy2</td>
<td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
<td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">false</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Status</th>
<th>Name</th>
<th>Patients</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
<th>Some Heading</th>
</tr>
</tfoot>
'

How to hide / show tr tag in table without change the width and sort of cells

Hi i would hide / show one row from table
But when click to show row again the design change
The columns of the hidden row shrink under one column of first row
My code
function toggle(tr_id) {
var x = document.getElementById(tr_id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<div class="col-lg-6 col-lg-push-3">
<table class="table table-resposive ">
<tr>
<td>name</td>
<td>address</td>
<td>age</td>
<td><a onclick="toggle('edit');" class="btn btn-sm btn-primary">edit</a></td>
</tr>
<tr id="edit">
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><a class="btn btn-sm btn-success">save</a></td>
</tr>
</table>
</div>
You can use display="table-row"
function toggle(tr_id) {
var x = document.getElementById(tr_id);
if (x.style.display === 'none') {
x.style.display = 'table-row';
} else {
x.style.display = 'none';
}
}
set your td css with fixed width
function toggle(tr_id) {
var x = document.getElementById(tr_id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
td {
width: 140px;
display: inline-block;
}
<div class="col-lg-6 col-lg-push-3">
<table class="table table-resposive ">
<tr>
<td>name</td>
<td>address</td>
<td>age</td>
<td><a onclick="toggle('edit');" class="btn btn-sm btn-primary">edit</a></td>
</tr>
<tr id="edit">
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><a class="btn btn-sm btn-success">save</a></td>
</tr>
</table>
</div>
how to make row move to top
function toggle(tr_id)
{
var x = document.getElementById(tr_id);
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
<div class="col-lg-6 col-lg-push-3">
<table class="table table-resposive ">
<tr>
<td>name</td>
<td>address</td>
<td>age</td>
<td><a onclick="toggle('edit');" class="btn btn-sm btn-primary">edit</a></td>
</tr>
<tr id="edit">
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
</tr>
<tr>
<td>name</td>
<td>address</td>
<td>age</td>
<td><a onclick="toggle('edit1');" class="btn btn-sm btn-primary">edit</a></td>
</tr>
<tr id="edit1">
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
</tr>
</table>
It's because you are displaying the row as block. Try use visibility == "hidden" instead of display
EDIT : Or you can use display = "table-row" as show below. The use visibility == "hidden" will hide the row, but it will still take up the same space as before.
if (x.style.display === "none") {
x.style.display = "table-row";
} else {
x.style.display = "none";
}
function toggle(tr_id)
{
var x = document.getElementById(tr_id);
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
<div class="col-lg-6 col-lg-push-3">
<table class="table table-resposive ">
<tr>
<td>name</td>
<td>address</td>
<td>age</td>
<td><a onclick="toggle('edit2');" class="btn btn-sm btn-primary">edit</a></td>
</tr>
<tr id="edit1">
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
</tr>
<tr id="edit2">
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
</tr>
<tr id="edit3">
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
</tr>
</table>
Snippet 2 :
function toggle(tr_id)
{
var x = document.getElementById(tr_id);
if (x.style.display === "none") {
x.style.display = "table-row";
} else {
x.style.display = "none";
}
}
<div class="col-lg-6 col-lg-push-3">
<table class="table table-resposive ">
<tr>
<td>name</td>
<td>address</td>
<td>age</td>
<td><a onclick="toggle('edit2');" class="btn btn-sm btn-primary">edit</a></td>
</tr>
<tr id="edit1">
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
</tr>
<tr id="edit2">
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
</tr>
<tr id="edit3">
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><input type="text" ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
</tr>
</table>
the default value of display propery of tr is table-row but not block,so the design is changed.
You should replace 'block' with 'table-row'
Here's a plain JavaScript way of doing toggle:
function toggle(_id) {
var x = document.getElementById(_id);
x.classList.toggle("hide-me");
}
.hide-me {
display: none;
}
<div class="col-lg-6 col-lg-push-3">
<table class="table table-resposive ">
<tr>
<td>name</td>
<td>address</td>
<td>age</td>
<td><a onclick="toggle('edit');" class="btn btn-sm btn-primary">edit</a></td>
</tr>
<tr id="edit">
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><a class="btn btn-sm btn-success">save</a></td>
</tr>
</table>
</div>

How to Move selected table tr's to another table?

I have got two tables mytable1 and mytable2
I am trying to move the checked tr rows (from table mytable1) to different table mytable2
I have tried as following
$(document).ready(function() {
$(document).on("click", ".movemultiple", function(event)
{
$('.mytable1 > tbody > tr').each(function() {
$(this).find('td:eq(0) .updatecheckboxvalueindb:checked')
});
});
});
.fa fa-check
{
background-color:red!importnt
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
<thead>
<tr class="existingvideos">
<th>Action</th>
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
</tr>
</thead>
<tbody class="connectedSortable ui-sortable">
<tr video-id="37" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>crunches</td>
<td>ht4_970_979.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr video-id="38" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>Sit Ups</td>
<td>ht4_970_345.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
</tbody>
</table>
<br><br>
<button type="button" class="btn red default movemultiple">Move </button>
<br><br>
<table class="mytable2 table table-bordered table-hover" id="videosexistingtable">
<tbody class="connectedSortable ui-sortable">
<tr class="existingvideos">
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
<th>Action</th>
</tr>
<tr class="existingvideos" video-id="34">
<td>Push Ups</td>
<td>ht4_970_285.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td>
<i class="fa fa-check"></i>
</td>
<td class="deletevidetd"><a data-videoid="34" class="fa fa-trash remove-delete-icon deletevideo" title="Delete"></a></td>
</tr>
</tbody>
</table>
Could you please let me know how to do this ?
http://jsfiddle.net/o2gxgz9r/1879/
You could use jQuery .closest() to get the closest table row (or table cell) and jQuery .remove() to remove the table cell with the checkbox from DOM:
$(document).ready(function () {
$(document).on('click', '.movemultiple', function() {
var $myTable2Body = $('.mytable2 tbody');
$('.mytable1 .updatecheckboxvalueindb:checked').each(function(index, item) {
var $checkbox = $(item);
$myTable2Body.append($checkbox.closest('tr'));
$checkbox.closest('td').remove();
});
});
});
.fa fa-check
{
background-color:red!importnt
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
<thead>
<tr class="existingvideos">
<th>Action</th>
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
</tr>
</thead>
<tbody class="connectedSortable ui-sortable">
<tr video-id="37" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>crunches</td>
<td>ht4_970_979.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr video-id="38" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>Sit Ups</td>
<td>ht4_970_345.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
</tbody>
</table>
<br><br>
<button type="button" class="btn red default movemultiple">Move </button>
<br><br>
<table class="mytable2 table table-bordered table-hover" id="videosexistingtable">
<tbody class="connectedSortable ui-sortable">
<tr class="existingvideos">
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
<th>Action</th>
</tr>
<tr class="existingvideos" video-id="34">
<td>Push Ups</td>
<td>ht4_970_285.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td>
<i class="fa fa-check"></i>
</td>
<td class="deletevidetd"><a data-videoid="34" class="fa fa-trash remove-delete-icon deletevideo" title="Delete"></a></td>
</tr>
</tbody>
</table>
JSFiddle
like this?
$(document).on("click", ".movemultiple", function(event){
$('.updatecheckboxvalueindb:checked').parents('tr').appendTo('.mytable2').find('.removecheckboxtd').remove();
});
check out the fiddle : http://jsfiddle.net/h9q8o340/

Renumber the rows in table after drag and drop

In a php generated table, i use drag and drop on the rows, to change the sorting. (first image, second image....)
If i drop the 4th row as first, it will be first, but the row i dropped, it stays as 4th, the rows wont renumber them.
How can i renumber the rows, and put the index in the hidden input named sorrend_hidden?
<table class="table table-hover table-bordered list" id="table_2">
<thead>
<tr>
<td style="width: 1px; text-align: center;"><input type="checkbox" class="checkAllCheckboxes" /></td>
<td style="text-align: center;">ID</td>
<td class="left">Kép</td>
<td class="left">Megnevezés</td>
<td style="text-align: center;">Sorrend</td>
<td style="text-align: center;">Státusz</td>
<td class="right">Műveletek</td>
</tr>
</thead>
<tbody>
<tr id="sor24">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="24" /></td>
<td style="text-align: center;">24</td>
<td class="left"><img width="200" src="images/homepage_slideshow/89-FIFA_17_B4jlEln.jpg" class="img-responsive" /></td>
<td class="left"></td>
<input type="hidden" value="" name="sorrend_hidden" />
<td style="text-align: center;">2</td>
<td style="text-align: center;">Intaktív</td>
<td class="right">
<span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span>
<a id="24" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
<tr id="sor31">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="31" /></td>
<td style="text-align: center;">31</td>
<td class="left"><img width="200" src="images/homepage_slideshow/503-WatchDogs2_FarCrayPrimal_1_.jpg" class="img-responsive" /></td>
<td class="left"></td>
<input type="hidden" value="" name="sorrend_hidden" />
<td style="text-align: center;">2</td>
<td style="text-align: center;">Aktív</td>
<td class="right">
<span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span>
<a id="31" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
<tr id="sor30">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="30" /></td>
<td style="text-align: center;">30</td>
<td class="left"><img width="200" src="images/homepage_slideshow/324-DeadRising4_megjelent.jpg" class="img-responsive" /></td>
<td class="left"></td>
<input type="hidden" value="" name="sorrend_hidden" />
<td style="text-align: center;">3</td>
<td style="text-align: center;">Aktív</td>
<td class="right">
<span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span>
<a id="30" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
<tr id="sor32">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="32" /></td>
<td style="text-align: center;">32</td>
<td class="left"><img width="200" src="images/homepage_slideshow/492-PS-VR_.jpg" class="img-responsive" /></td>
<td class="left"></td>
<input type="hidden" value="" name="sorrend_hidden" />
<td style="text-align: center;">4</td>
<td style="text-align: center;">Aktív</td>
<td class="right">
<span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span>
<a id="32" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
<tr id="sor23">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="23" /></td>
<td style="text-align: center;">23</td>
<td class="left"><img width="200" src="images/homepage_slideshow/90-konzolkiraly_sl_1467362325.jpg" class="img-responsive" /></td>
<td class="left"></td>
<input type="hidden" value="" name="sorrend_hidden" />
<td style="text-align: center;">5</td>
<td style="text-align: center;">Intaktív</td>
<td class="right">
<span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span>
<a id="23" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
</tbody>
</table>
Jquery:
$("#table_2").tableDnD(
{
onDrop: function(table, row)
{
var rows = table.tBodies[0].rows;
var RowID = row.id.substr(3);
var RowIndex = $(row).index() + 1;
// name = sorrend_hidden
$.ajax({
data: { RowID:RowID, RowIndex:RowIndex },
type: 'POST',
url: 'files/update_slide_index.php',
success: function(data)
{
var result = $.trim(data);
$('#newsletterResult').html(result);
$('#newsletterModal').modal('show');
},
complete: function()
{
setTimeout(function()
{
location.reload();
}, 3000 );
}
});
}
});
Sql update:
<?php
include_once("../../files/connect.php");
if(isset($_POST['RowID']))
{
$RowID = intval($_POST['RowID']);
$RowIndex = intval($_POST['RowIndex']);
$sql = "UPDATE slideshow SET slide_sorrend = '$RowIndex' WHERE slide_id = '$RowID'";
/*if(mysqli_query($kapcs, $sql))
{
mysqli_query($kapcs, "UPDATE slideshow SET slide_sorrend = slide_sorrend + 1 WHERE slide_id != '$RowID'") or die(mysqli_error($kapcs));
}
else
{
die(mysqli_error($kapcs));
}*/
echo 'A kép sorrendje sikeresen megváltozott.';
}
else
{
echo 'Nincs ID';
}
?>
I had a similar issue months ago. I ended up using the sortable feature included in jQuery UI.

Selenium Webdriver - elements only with exact value identification , js/html

I am wondering about one thing.
Have a UI html table with two records and would like to click on a record only with exact value.
Something like for instance:
SELECT record WHERE tr data-user LIKE "testuser1"
Is it possible to do that in some simple way ?
<table class="table table-striped">
<thead>
<tr>
<th>
<input type="checkbox" disabled="">
</th>
<th data-sort="status">Status
<i class="fa fa-sort-"></i>
</th>
<th data-sort="name">Name
<i class="fa fa-sort-"></i>
</th>
<th data-sort="position">Position
<i class="fa fa-sort-"></i>
</th>
<th data-sort="userCode">ID
<i class="fa fa-sort-asc"></i>
</th>
<th data-sort="email">e-mail
<i class="fa fa-sort-"></i>
</th>
</tr>
</thead>
<tbody>
<tr data-user="testuser1">
<td>
<input type="checkbox" disabled="">
</td>
<td>
<div class="toggle btn btn-default off btn-sm" data-toggle="toggle" style="width: 76px; height: 30px;">
<input data-user-code="a.anpilov" class="status-toggle" type="checkbox" data-toggle="toggle" data-on="Active" data-off="Inactive" data-size="small">
<div class="toggle-group">
<label class="btn btn-primary btn-sm toggle-on">Active</label>
<label class="btn btn-default btn-sm active toggle-off">Inactive</label><span class="toggle-handle btn btn-default btn-sm"></span></div>
</div>
</td>
<td class="plain">
testuser1
</td>
<td class="plain">
testuser1
</td>
<td class="plain">
testuser1
</td>
<td class="plain">
testuser1
</td>
</tr>
<tr data-user="testuser2">
<td>
<input type="checkbox" disabled="">
</td>
<td>
<div class="toggle btn btn-default off btn-sm" data-toggle="toggle" style="width: 76px; height: 30px;">
<input data-user-code="a.puchaujara" class="status-toggle" type="checkbox" data-toggle="toggle" data-on="Active" data-off="Inactive" data-size="small">
<div class="toggle-group">
<label class="btn btn-primary btn-sm toggle-on">Active</label>
<label class="btn btn-default btn-sm active toggle-off">Inactive</label><span class="toggle-handle btn btn-default btn-sm"></span></div>
</div>
</td>
<td class="plain">
testuser2
</td>
<td class="plain">
testuser2
</td>
<td class="plain">
testuser2
</td>
<td class="plain">
testuser2
</td>
</tr>
</tbody>
</table>
Tried to do it like that:
getDriver().findElement(By.xpath("//div[#id='content'//div[#class='container'//table[#class='table table-striped'//following::tbody//tr[#data-user='testuser1']")).click();
but did not work ... :(
Maybe you can use xpath expression using value attribute. For example, to select certain element with id and value and click on it:
driver.findElement(By.xpath("//*[#id='" + yourId + "' and #value='" + yourValue + "']")).click();
Or a td whith a text inside (be aware that td tag has no value, it has a text inside):
driver.findElement(By.xpath("//td[text()='" + yourTdText + "']")).click();
If you can build an unique xpath to identify what you are looking for this should be your best option even if you don't know the id or the tag type.
Subject to close.
Final solution:
getDriver().findElement(By.xpath("//tr[#data-user='testuser1']")).click();

Categories