We Keep Coding

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>
'

Keep style of <tr> while dragging

I have a table where I use JqueryUI and when I make a drag of a row the style of this disappear, that's normal cause when you make a drag of the row, this pass to be outside of table.
The element created while dragging is a <tr>and have the class .placeholder-style I want to keep the padding of the fields in the row created while drag.
How can I do this?
$("#tabs").tabs();
$("#tbodyproject").sortable({
items: "> tr",
appendTo: "parent",
helper: "clone",
placeholder: "placeholder-style",
start: function(event, ui) {
var cantidad_real = $('.table thead tr th:visible').length;
var cantidad_actual = $(this).find('.placeholder-style td').length;
if (cantidad_actual > cantidad_real) {
var cantidad_a_ocultar = (cantidad_actual - cantidad_real);
for (var i = 0; i <= cantidad_a_ocultar; i++) {
$(this).find('.placeholder-style td:nth-child(' + i + ')').addClass('hidden-td');
}
}
ui.helper.css('display', 'table');
},
stop: function(event, ui) {
ui.item.css('display', '')
},
update: function(event, ui) {
let newOrder = $(this).sortable('toArray');
$.ajax({
type: "POST",
url: '/admin/projects/updateOrder',
data: {
ids: newOrder
}
})
.done(function(msg) {
location.reload();
});
}
}).disableSelection();
img {
width: 100px;
}
.hidden-td {
display: none !important;
}
.table {
background-color: green;
border: 0;
}
.trdrag {
background-color: yellow;
}
.thcenter {
background-color: grey !important;
}
.ui-sortable-helper {
left: 0px!important;
}
.idrow {
width: 5%;
}
.tdvisible {
width: 5%;
}
.tdslug {
width: 10%;
}
.tdimg {
width: 15%;
}
.tdorder {
width: 20%;
}
.tdacciones {
width: 40%;
}
#media (max-width: 500px) {
.ocultarid {
display: none;
}
.tdslug {
width: 15%;
}
}
#media (max-width: 350px) {
.ocultarvisible {
display: none;
}
.accionesvisible {
display: none;
}
.ordenvisible {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="tabs">
<div class="col-md-12">
<div id="table1">
<table class="table">
<thead>
<tr>
<th class="thcenter ocultarid">ID</th>
<th class="thcenter ocultarvisible">Visible</th>
<th class="thcenter slug">Nombre</th>
<th class="thcenter header">Header</th>
<th class="thcenter home">Home</th>
<th class="thcenter ordenvisible">Orden</th>
<th class="thcenter accionesvisible"><span class="glyphicon glyphicon-cog"></span>Acciones</th>
</tr>
</thead>
<tbody id="tbodyproject">
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">1</p>
</td>
<td class="hidden-td" style="display:none;">Testing</td>
<td class="hidden-td" style="display:none;">Testing2</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">2</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">3</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">1</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">4</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id2" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">5</p>
</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 2</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 2">Delete
</form>
</td>
</tr>
</tbody>
</table>
<br><br>
</div>
</div>
https://jsfiddle.net/3g3bt80e/9/

Try defineing the td / tr tags the css to a certain height & width this may resolve ur problem.

JQuery table filter : Multifilter

$('.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>

Add class to all <tr> by clicking checkbox

With this code, i get all the checkboxes checked:
$(".checkAllCheckboxes").click(function()
{
$('input:checkbox').not(this).prop('checked', this.checked);
});
With this, i add a class to the element, where the checkbox is in.
$(function()
{
$('.table_row_checkbox').on('change',function(){
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});
});
How can i add that class, in my first code, to all the elements, by clicking select all checkboxes?
Sorry, i dont mean that.
My generated table code looks like:
<table class="table table-hover table-bordered list">
<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">Név</td>
<td class="left">E-mail</td>
<td class="left">Telefonszám</td>
<td style="text-align: center;">Dátum</td>
<td style="text-align: center;">Státusz</td>
<td class="right">Műveletek</td>
</tr>
</thead>
<tbody>
<tr id="sor55">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="55" /></td>
<td style="text-align: center;">55</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="55" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
<tr id="sor54">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="54" /></td>
<td style="text-align: center;">54</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="54" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
</tbody>
</table>
In the first , theres the select all checkbox.

$(".checkAllCheckboxes").click(function()
{
$('input:checkbox').not(this).prop('checked', this.checked);
$('input:checkbox').each(function() {
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});;
});
$('.table_row_checkbox').on('change',function(){
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-bordered list">
<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">Név</td>
<td class="left">E-mail</td>
<td class="left">Telefonszám</td>
<td style="text-align: center;">Dátum</td>
<td style="text-align: center;">Státusz</td>
<td class="right">Műveletek</td>
</tr>
</thead>
<tbody>
<tr id="sor55">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="55" /></td>
<td style="text-align: center;">55</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="55" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
<tr id="sor54">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="54" /></td>
<td style="text-align: center;">54</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="54" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
</tbody>
</table>

Or, slightly shorter, see here fiddle (edited):
$(".checkAllCheckboxes").click(function()
{
$(this).closest('table').find('input:checkbox').prop('checked', this.checked)
.closest('tr').toggleClass('selected',this.checked)
});
The function does both, set the tickmarks and assigns/removes the classname to the parent-trs. As it turns out, the .not(this) and later .addSelf() were not even necessary to achieve the intended effect. I therefore removed them again ("Write less, do more").
.closest() is advantageous in cases where there might be nested tables (.parents() would find all parent tables)
.closest('tr') gets the trs you want to work on.
Well, the above does not quite do everything. It does not do the tr-class-handling when clicking on a "normal" checkbox. The following does:
$('input:checkbox').click(function()
{ var jqobj=$(this);
if (jqobj.hasClass('checkAllCheckboxes')) // extend the selection
{ jqobj=jqobj.closest('table').find('input:checkbox'); }
jqobj.prop('checked', this.checked).closest('tr')
.toggleClass('selected',this.checked);
});

this can also be used to acheive the same
$(".checkAllCheckboxes").click(function(){
if($(this).is(':checked')){
$(this).parents('tr').addClass('checked');
$('tbody tr').addClass('checked')
$('tbody input[type="checkbox"]').prop('checked',true)
}
else{
$(this).parents('tr').removeClass('checked');
$('tbody tr').removeClass('checked')
$('tbody input[type="checkbox"]').prop('checked',false)
}
});

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();