I am creating a table in which I have draggable tr, I used TableDnD for draggable component.
The code look like the following:
$(document).ready(function () {
var iCnt = 1;
$("#tblQuestionAns tr").each(function () {
var id = "tr" + parseInt(iCnt);
$(this).attr("id", id);
iCnt++;
});
$("#tblQuestionAns").find("tr :even").addClass("even");
$("#tblQuestionAns").find("tr :odd").addClass("odd");
$("#tblQuestionAns").tableDnD({
onDragClass: "myDragClass",
onDrop: function (table, row) {
$("#tblQuestionAns").find("tr").removeClass("even odd");
$("#tblQuestionAns").find("tr :even").addClass("even");
$("#tblQuestionAns").find("tr :odd").addClass("odd");
}
});
});
This is working when I create a table like the following:
<table id="tblQuestionAns">
<tr>
<td>
Test1
</td>
</tr>
<tr>
<td>
Test2
</td>
</tr>
</table>
but when I add span in td, it will not work, here is an example:
<table id="tblQuestionAns">
<tr>
<td>
<span>Test1</span>
</td>
</tr>
<tr>
<td>
<span>Test2</span>
</td>
</tr>
</table>
here is JSFiddle for your reference
Have you tried to disable pointer events on span?
It's working fine for me. Not sure if this is what you're trying to accomplish.
$(document).ready(function() {
var iCnt = 1;
$(".tblQuestionAns tr").each(function() {
var id = "tr" + parseInt(iCnt);
$(this).attr("id", id);
iCnt++;
});
$(".tblQuestionAns").find("tr :even").addClass("even");
$(".tblQuestionAns").find("tr :odd").addClass("odd");
$(".tblQuestionAns").tableDnD({
onDragClass: "myDragClass",
onDrop: function(table, row) {
$(".tblQuestionAns").find("tr").removeClass("even odd");
$(".tblQuestionAns").find("tr :even").addClass("even");
$(".tblQuestionAns").find("tr :odd").addClass("odd");
}
});
});
span {
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/isocra/TableDnD/master/js/jquery.tablednd.js"></script>
<div>
without span
</div>
<table class="tblQuestionAns">
<tr>
<td>
test1
</td>
</tr>
<tr>
<td>
test2
</td>
</tr>
</table>
<div>
with span
</div>
<table class="tblQuestionAns">
<tr>
<td>
<span>test1</span>
</td>
</tr>
<tr>
<td>
<span>test2</span>
</td>
</tr>
</table>
Related
please suggest me
my code :
$('.Create-New-Order').click(function () {
var totalRowCount = $("#table_New_Order tbody tr").length;
alert(totalRowCount);
});
On-load table tr count
$(function() {
$('.Create-New-Order').click(function() {
var total = $('#mytbl tr').length ;
alert('tr count = '+ total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table border="1px solid red">
<tr>
<th>Name</th><th>Email</th>
</tr>
<tbody id="mytbl">
<tr>
<td>sfdsd</td><td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td><td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td><td>tsdaf#ymail.com</td>
</tr>
</tbody>
</table>
<br>
<br>
Create-New-Order
I am currently learning JQuery and was wondering how you can only affect one cell from a table?
This is my fiddle https://jsfiddle.net/amosangyongjian/mmqasf5t/4/
This is the jquery code
$(document).ready(function(){
$("td").hover(function(){
$(this).siblings(".expand").slideDown("slow");
},function(){
$(this).siblings(".expand").slideUp("slow");
});
});
I've tried several other methods but none seem to work.
Please help.
Thank you
Try this:
$(document).ready(function(){
$("td").hover(function(){
$(this).find(".expand").slideDown("slow");
},function(){
$(this).find(".expand").slideUp("slow");
});
});
td {
padding:10px;
}
.expand {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tableclass">
<tr>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello1</p>
</td>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello2</p>
</td>
</tr>
<tr>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello3</p>
</td>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello4</p>
</td>
</tr>
</table>
td doesn't have any siblings with .expand. However, p does.
So you have two alternatives, either set the event listener to td p, which also would affect the area that you can hover. So what you really want is probably to change:
$(this).siblings(".expand")
to
$(this).children(".expand")
$("td").hover(function(){
$(this).children(".expand").slideDown("slow");
}, function(){
$(this).children(".expand").slideUp("slow");
});
td {
padding:10px;
}
.expand {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tableclass">
<tr>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello1</p>
</td>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello2</p>
</td>
</tr>
<tr>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello3</p>
</td>
<td>
<p class="expand">Hello1Expanded</p>
<p>Hello4</p>
</td>
</tr>
</table>
this is correct way when you choose via $("td")
$(document).ready(function(){
$("td").hover(function(){
$(this).find(".expand").slideDown('slow');
},function(){
$(this).find(".expand").slideUp("slow");
});
});
or
$(document).ready(function(){
$("td").hover(function(){
$(this).children(".expand").slideDown('slow');
},function(){
$(this).children(".expand").slideUp("slow");
});
});
your code also work when you change your code $("td p")
$("td p") -siblings will .expand
$("td") -siblings will another td datas
because siblings will it get previous element.
Is it possible to examine the content within a tr, AFTER an html element (br) to see if any exists? If there is no content after the br element, I'd like to hide the parent td. Please note that the html code is system generated and I cannot edit it.
I'm just not sure where to begin with this. Any help is greatly appreciated.
<table class="tabledefault">
<tbody>
<tr>
<td id="customfields">
<table class="tabledefault">
<tbody>
<tr><!-- this TR should be hidden -->
<td id="CAT_Custom_451068"><strong>Laser Tag</strong>
<br>
</td>
</tr>
<tr>
<td id="CAT_Custom_451069"><strong>Arcade</strong>
<br>Selected
</td>
</tr>
<tr>
<td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
<br>False
</td>
</tr>
<tr>
<td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
<br>True</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Try using .each() , nextSibling , nodeValue , String.prototype.match() , .closest()
$("table tr td br").each(function(i, el) {
// if `br` next sibling does not contain alphanumeric characters,
// hide parent `tr` element
if (el.nextSibling.nodeType === 3
&& el.nextSibling.nodeValue.match(/\w+/) === null
|| $(el).next(":empty").length) {
$(this).closest("tr").hide()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table class="tabledefault">
<tbody>
<tr>
<td id="customfields">
<table class="tabledefault">
<tbody>
<tr><!-- this TR should be hidden -->
<td id="CAT_Custom_451068"><strong>Laser Tag</strong>
<br><span></span>
</td>
</tr>
<tr>
<td id="CAT_Custom_451069"><strong>Arcade</strong>
<br>Selected
</td>
</tr>
<tr>
<td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
<br>False
</td>
</tr>
<tr>
<td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
<br>True</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Yes, you just get the trs, then find out if the first <br> element inside the first <td> has any following element siblings (I'm making an assumption there, that you don't want those hidden), or any following text node siblings that aren't blank. jQuery's contents is handy for that, as it includes text nodes. I'd probably loop through them backward:
$("#customfields .tabledefault tr").each(function(index) {
var $tr = $(this);
$tr.find("td:first").contents().get().reverse().some(function(node) {
if (node.nodeName.toUpperCase() === "BR") {
// Hide it, and we're done looping
$tr.hide();
return true;
}
if (node.nodeType != 3 || $.trim(node.nodeValue)) {
// Don't hide it, and we're done looping
return true;
}
});
});
I expect that can be optimized, but you get the idea.
Live Example:
var counter = 3;
tick();
function tick() {
$("#countdown").text(counter--);
if (counter < 0) {
hideIt();
} else {
setTimeout(tick, 500);
}
}
function hideIt() {
$("#customfields .tabledefault tr").each(function(index) {
var $tr = $(this);
$tr.find("td:first").contents().get().reverse().some(function(node) {
if (node.nodeName.toUpperCase() === "BR") {
// Hide it, and we're done looping
$tr.hide();
return true;
}
if (node.nodeType != 3 || $.trim(node.nodeValue)) {
// Don't hide it, and we're done looping
return true;
}
});
});
}
<table class="tabledefault">
<tbody>
<tr>
<td id="customfields">
<table class="tabledefault">
<tbody>
<tr>
<!-- this TR should be hidden -->
<td id="CAT_Custom_451068"><strong>Laser Tag</strong>
<br>
</td>
</tr>
<tr>
<td id="CAT_Custom_451069"><strong>Arcade</strong>
<br>Selected
</td>
</tr>
<tr>
<td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
<br>False
</td>
</tr>
<tr>
<td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
<br>True</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown"> </div>
I am having the table with following data in it
<table>
<tr>
<td> cat </td>
<td> dog </td>
</tr>
<tr>
<td> hen </td>
<td> cock </td>
</tr>
</table>
I would like to delete the row based on the particular data given in table.
But I don't have any idea on how to delete the rows based on the particular data
Try this:
var table = document.querySelector('table');
var filterInput = document.querySelector('#filter');
filterInput.onkeyup = function () {
var val = this.value;
var td = table.getElementsByTagName('td');
var rows = [];
[].slice.call(td).forEach(function (el, i) {
if (el.textContent === val) {
rows.push(el);
}
});
rows.forEach(function(el) {
el.parentNode.style.display = 'none';
});
};
<input type="text" id="filter" placeholder="Hide row containing...">
<table>
<tr>
<td>cat</td>
<td>dog</td>
</tr>
<tr>
<td>hen</td>
<td>cock</td>
</tr>
</table>
Find the required element and then use style property to hide it. In the example, I went onto hide the table data element corresponding to the data dog.
var tds = $("td");
for(var i =0 ; i< tds.length ; i++)
{
var tdval = tds[i].innerHTML;
if(tdval.trim()=="dog")
{
document.getElementsByTagName("td")[i].style.display = "none";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td> cat </td>
<td> dog </td>
</tr>
<tr>
<td> hen </td>
<td> cock </td>
</tr>
</table>
I use the following code snippet http://jsfiddle.net/giorgitbs/52aK9/1/:
$(document).ready(function () {
(function ($) {
$('#filter').keyup(function () {
var rex = new RegExp($(this).val(), 'i');
$('.searchable tr').hide();
$('.searchable tr').filter(function () {
return rex.test($(this).text());
}).show();
})
}(jQuery));
});
this works great. However how can I display a row containing the text "No matching records found" when there are no results instead of a blank table?
I would do something like this. First I add a (hidden by default) row to the table to show no data. Then in the jQuery, check the number of rows visible. If it's 0, show the hidden row.
$(document).ready(function () {
(function ($) {
$('#filter').keyup(function () {
var rex = new RegExp($(this).val(), 'i');
$('.searchable tr').hide();
$('.searchable tr').filter(function () {
return rex.test($(this).text());
}).show();
$('.no-data').hide();
if($('.searchable tr:visible').length == 0)
{
$('.no-data').show();
}
})
}(jQuery));
});
.no-data {
display: none;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group"> <span class="input-group-addon">Filter</span>
<input id="filter" type="text" class="form-control" placeholder="Type here...">
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Default</th>
<th>Status</th>
</tr>
</thead>
<tbody class="searchable">
<tr class="no-data">
<td colspan="4">No data</td>
</tr>
<tr>
<td>EUR</td>
<td>EURO</td>
<td></td>
<td>Active</td>
</tr>
<tr>
<td>GBP</td>
<td>Pound</td>
<td></td>
<td>Active</td>
</tr>
<tr>
<td>GEL</td>
<td>Georgian Lari</td>
<td><span class="glyphicon glyphicon-ok"></span>
</td>
<td>Active</td>
</tr>
<tr>
<td>USD</td>
<td>US Dollar</td>
<td></td>
<td>Active</td>
</tr>
</tbody>
</table>
You can add the number of records found using code below in bootstrap:
<tr class="no-data">
<td colspan="14">No data available in table</td>
</tr>
Here, "14" indicates the number of columns present in the header row.