I have a page with a table containing customer data like customer name, quantity, price, and status. The Table looks like this:
<table>
<tr>
<th>No</th>
<th>Customer</th>
<th>Quantity</th>
<th>Price</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Customer 1</td>
<td>5000</td>
<td>100000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Customer 2</td>
<td>2000</td>
<td>40000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Customer 3</td>
<td>3000</td>
<td>60000</td>
<td class="status-order">Delivered</td>
<td>
<a class="update btn btn-outline-primary">Update</a>
<a class="delete btn btn-outline-danger">Delete</a>
</td>
</tr>
</table>
I want to hide the Update button based on condition. Let's say the status is "Delivered", then the Update button does not appear. So I create a jQuery file like this:
$(".status-order").each(function() {
const status = $(this).text()
if (status == "Delivered"){
$(".update").hide()
console.log(true)
} else {
$(".update").show()
console.log(false)
}
})
After I try to refresh the page to see the result, the update button in each rows are hide. I know my jQuery that i create it's wrong, can you give me correct answer how to fix this? Thank you.
$(".update").hide() or $(".update").show() will both iterate through all elements matching .update and hide or show them. You only want to hide or show the .update that's in the current table row.
The .status-order you're iterating over is in a prior <td>, so use .next() to get to the next <td>, and then use .find('.update') on that to get to the descendant.
$(".status-order").each(function() {
const status = $(this).text();
const update = $(this).next().find('.update');
if (status == "Delivered") {
update.hide()
} else {
update.show()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>No</th>
<th>Customer</th>
<th>Quantity</th>
<th>Price</th>
<th>Status</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Customer 1</td>
<td>5000</td>
<td>100000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Customer 2</td>
<td>2000</td>
<td>40000</td>
<td class="status-order">Order</td>
<td>
<a class="btn btn-outline-primary">Update</a>
<a class="btn btn-outline-danger">Delete</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Customer 3</td>
<td>3000</td>
<td>60000</td>
<td class="status-order">Delivered</td>
<td>
<a class="update btn btn-outline-primary">Update</a>
<a class="delete btn btn-outline-danger">Delete</a>
</td>
</tr>
</table>
Related
I have a table which will only ever have three rows.
There is an image which is an anchor tag in the third row and from the click event of this anchor tag I want to retrieve the text value from the first row in the same column by the class name of thisEventName.
<table id="tblTimedPathwayEvents">
<tbody>
<tr>
<td>Event</td>
<td class="thisEventName">)Event #1</td>
<td class="thisEventName">)Event #2</td>
<td class="thisEventName">)Event #3</td>
</tr>
<tr>
<td>Target Day(s)</td>
<td>2</td>
<td>3</td>
<td>28</td>
</tr>
<tr>
<td>Performed Day</td>
<td><a class="performedDayLink" href="#"><img src="http://localhost:55223//graphics/pencil-square.jpg" title="Edit"></a></td>
<td><a class="performedDayLink" href="#"><img src="http://localhost:55223//graphics/pencil-square.jpg" title="Edit"></a></td>
<td><a class="performedDayLink" href="#"><img src="http://localhost:55223//graphics/pencil-square.jpg" title="Edit"></a></td>
</tr>
</tbody>
</table>
I've tried things like this but to no avail
$(this).closest('td').find('.thisEventName').text();
You can use .index() on the parent td, which will give its relative position within its parent (ie will give the column).
var idx = $(this).closest("td").index();
Then you can get the same column's td from the first row
$(this).closest("tbody").find("tr td").eq(idx)
Giving updated snippet:
$(".performedDayLink").click(function() {
var idx = $(this).closest("td").index();
var txt = $(this).closest("tbody").find("tr td").eq(idx).text();
$("#out").text(txt);
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTimedPathwayEvents">
<tbody>
<tr>
<td>Event</td>
<td class="thisEventName">)Event #1</td>
<td class="thisEventName">)Event #2</td>
<td class="thisEventName">)Event #3</td>
</tr>
<tr>
<td>Target Day(s)</td>
<td>2</td>
<td>3</td>
<td>28</td>
</tr>
<tr>
<td>Performed Day</td>
<td>
<a class="performedDayLink" href="#">EDIT 1</a>
</td>
<td>
<a class="performedDayLink" href="#">EDIT 2</a>
</td>
<td>
<a class="performedDayLink" href="#">EDIT 3</a>
</td>
</tr>
</tbody>
</table>
<hr/>
<div id="out"></div>
I know there was a billion questions like my but I still can't find solution, and I know it's basic and fundamentals of JS but I'm new with this language.
Ok, so I have table
<table>
<tr id = 'first'>
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>SomeName</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>2</td>
<td>SomeName2</td>
<td>
Up
Down
</td>
</tr>
</table>
And I need to make functionality which allows to replacing table rows under <th># . When I put row with #2 on place #1 I want to keep proper orders of rows, 1,2 etc. I have row 2 on first place in my table but with #2, I need to change it.
It looks like this:
function moveChoiceTo(elem_choice, direction) {
var tr = elem_choice.parentNode.parentNode,
td = tr.parentNode;
if (direction === -1 && tr.previousElementSibling &&
!tr.previousElementSibling.id) {
td.insertBefore(tr, tr.previousElementSibling);
} else if (direction === 1 && tr.nextElementSibling) {
td.insertBefore(tr, tr.nextElementSibling.nextElementSibling)
}
}
But I still have no idea how to make my # unchanged. I want to use for it JQ but I've tried different solutions and none of them works.
I've tried
$(tr.firstElementChild.innerHTML).before($(tr.previousElementSibling.firstElementChild.innerHTML));
$(tr.firstElementChild.innerHTML).html(tr.previousElementSibling.firstElementChild.innerHTML);
$(tr.firstElementChild.innerHTML).replaceWith($(tr.previousElementSibling.firstElementChild.innerHTML));
And some others combination but i can't figured out what is wrong. Do I pass JS variable to JQ function in wrong way?
My table should looks like:
<table>
<tr id = 'first'>
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>SomeName2</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>2</td>
<td>SomeName1</td>
<td>
Up
Down
</td>
</tr>
</table>
Name, action and others rows replaced places but #id is unchanged
EDIT.
Ok, I'm the stupidest man on the earth.
This is solution I was looking for:
$(tr.firstElementChild).html(tr.previousElementSibling.firstElementChild.innerHTML++);
when I go up, and
$(tr.firstElementChild).html(tr.nextElementSibling.firstElementChild.innerHTML--);
when I go down
Get second tr using $('tr').eq(1), then get all the children of tr and then use eq(1) to get second td.
const td1 = $('tr').eq(1).children().eq(1);
const td2 = $('tr').eq(2).children().eq(1);
const temp = td1.text();
td1.text(td2.text());
td2.text(temp);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr id='first'>
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>SomeName</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>2</td>
<td>SomeName2</td>
<td>
Up
Down
</td>
</tr>
</table>
Here's a simple solution using a delegate listener on the table element:
myTable.addEventListener('click', function({
target: t
}) {
if (t.tagName === 'BUTTON' && ['up', 'down'].includes(t.textContent.toLowerCase())) {
let row = t.closest('tr');
switch (t.textContent.toLowerCase()) {
case 'up':
let prevRow = row.previousElementSibling;
if (prevRow) {
row.parentElement.insertBefore(row, prevRow);
}
break;
case 'down':
let nextRow = row.nextElementSibling;
if (nextRow) {
row.parentElement.insertBefore(nextRow, row);
}
break;
}
}
})
<table id="myTable">
<thead>
<tr id="first">
<th>#</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>SomeName1</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>2</td>
<td>SomeName2</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>3</td>
<td>SomeName3</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>4</td>
<td>SomeName4</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>5</td>
<td>SomeName5</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
<tr>
<td>6</td>
<td>SomeName6</td>
<td>
<button type="button">Up</button>
<button type="button">Down</button>
</td>
</tr>
</tbody>
</table>
I am trying to move a selected row in my DataTable to another DataTable. I have this almost working but the problem is with the cells that have data-search attributes on them. That data just gets placed into my other table as [object Object]. I've tried finding an example on how to handle this case in the documentation but I'm not having any luck. Here is what I have..
https://jsfiddle.net/dmcgrew/x85o0mgL/5/
HTML..
<table id="selected_items">
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Crest Allowed</th>
<th> </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="select_items">
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Crest Allowed</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr id="1">
<td data-search="test">1</td>
<td>Testing Bowl</td>
<td data-search="nocrest">NO</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="test">32</td>
<td>Cup Test</td>
<td data-search="nocrest">NO</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="pristine">3335</td>
<td>Bowl Test</td>
<td data-search="nocrest">NO</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="pristine">120</td>
<td>Plate Test</td>
<td data-search="yescrest">YES</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="test">1000</td>
<td>Mug Test</td>
<td data-search="yescrest">YES</td>
<td><button class="button select">Select</button></td>
</tr>
<tr>
<td data-search="pristine">65</td>
<td>Ramekin Test</td>
<td data-search="yescrest">YES</td>
<td><button class="button select">Select</button></td>
</tr>
</tbody>
</table>
JS...
var select_items = $('.select_items').dataTable();
var selected_items = $('#selected_items').DataTable();
$('.select_items').on("click", "button.select", function(){
var selectedRow = select_items.api().row( $(this).parents("tr") ).data();
selected_items.row.add(selectedRow).draw(true);
});
Your basic problem is the data.
When a td has a data attribute (data-search), it is included in the data object so your data array looks like this:
[{display:"1", #data-search:"test"}, "Testing Bowl", {display: "NO", #data-search: "nocrest"}, "Select"] so first and third items in the array are, in fact objects, hence [object, object]
so the quickest (not the best in my mind) is to alter the data before you add it.
select_items.on("click", "button.select", function(){
var selectedRow = select_items.api().row( $(this).parents("tr") ).data();
console.log(selectedRow);
selectedRow[0] = selectedRow[0].display;
selectedRow[2] = selectedRow[2].display;
selected_items.row.add(selectedRow).draw(true);
});
https://jsfiddle.net/x85o0mgL/12/
So here is my Concern. I am trying to sort the data i have in the following format so that every parent elemnts has child elments and when the sort is selected for that, it should only sort its childrens
The Code for this is:
<!--- first list --->
<tr>
<td colspan="2"><li class="childrens" data-id="99" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Information</strong> [Desc] </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="81" style="margin-left:20px;"> Running </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="113" style="margin-left:40px;"> Coping</li></td>
</tr>
<tr>
<td colspan="2"><li data-id="71" style="margin-left:40px;"> Printing </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="65" style="margin-left:20px;"> references </li></td>
</tr>
<!--- Second List --->
<tr>
<td colspan="2"><li class="childrens" data-id="85" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Papers</strong> [Desc] </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="116" style="margin-left:20px;"> Opening </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="109" style="margin-left:20px;"> Closng </li></td>
</tr>
what i am trying is: when i click the desc of the first list, it should only the elements which are under the first list using data-id
same for second list ..
both lists should work independently and sorting should be on heir own, i gave a shot but not successful
here is my code
function sortdesc(){
$('li.childrens').sort(function(a,b){
return parseInt(a.getAttribute('data-id'),10)-parseInt(b.getAttribute('data-id'),10)
});
}
$(document).on('click',".sort",function(e) {
sortdesc();
});
tried here in fiddle but no luck [updated to add table to each li]
http://jsfiddle.net/HWmz3/85/
According to this answer:
function sortdesc(elem) {
// get the table of the clicked link, find its tbody
var $tbody = $(elem).closest('table').find('tbody');
// sort the tr of this tbody
$tbody.find('tr')
.sort(function(a, b) {
var a = $(a).find('li'); // get the li of a tr
var b = $(b).find('li'); // get the li of b tr
return a.data('id') < b.data('id') ? -1 : 1; // compare and return the result
})
.appendTo($tbody); // to make the sort
}
$(document).on('click', ".sort", function(e) {
// pass the link that was clicked to the function:
sortdesc(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- first list --->
<table>
<thead>
<tr>
<td colspan="2">
<li class="childrens" data-id="99" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Information</strong> [Desc]
</li>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<li data-id="81" style="margin-left:20px;">Running</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="113" style="margin-left:40px;">Coping</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="71" style="margin-left:40px;">Printing</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="65" style="margin-left:20px;">references</li>
</td>
</tr>
</tbody>
</table>
<!--- Second List --->
<table>
<thead>
<tr>
<td colspan="2">
<li class="childrens" data-id="85" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Papers</strong> [Desc]
</li>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<li data-id="116" style="margin-left:20px;">Opening</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="109" style="margin-left:20px;">Closng</li>
</td>
</tr>
</tbody>
</table>
First of all , please bear with me about my bad english :(
I am listing data in a table using for-each loop and above HTML will generate if use to slideToggle then it open fine.
but if another row open then last one still open , i want to open a new one but close previous.
function view_history_details ( ) {
$('#view-details').slideToggle();
}
<table>
<tr>
<td>
<a href="javascript:;" onclick="view_history_details()" title="View" data-keyboard="false" ></a>
</td>
</tr>
<tr style="display:none" class="view-details">
some text
</tr>
<tr>
<td>
<a href="javascript:;" onclick="view_history_details()" title="View" data-keyboard="false" ></a>
</td>
</tr>
<tr style="display:none" class="view-details">
some text
</tr>
<tr>
<td>
<a href="javascript:;" onclick="view_history_details()" title="View" data-keyboard="false" ></a>
</td>
</tr>
<tr style="display:none" class="view-details">
some text
</tr>
</table>
You can redesign the solution as below using jQuery event handlers.
We adds a class to the anchor elements which triggers the action, then use that class to register the click handlers. Inside the handler we toggles the next view-details row and hides all other view-details elements
jQuery(function($) {
$('.toggle').click(function(e) {
console.log(this)
e.preventDefault();
var $cur = $(this).closest('tr').next('.view-details').stop().toggle();
$('.view-details').not($cur).stop().hide();
})
})
.toggle {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
togggle
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
togggle
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
togggle
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
</table>
You need to pass particular control to your function so as to slideToggle only that control's view-details element as below:
function view_history_details (ctrl) {
$('.view-details').slideUp();
$(ctrl).closest('tr').next('.view-details').slideToggle();
}
and when calling function from td write it as below and pass this
<td>
<a href="javascript:;" onclick="view_history_details(this)" title="View" data-keyboard="false" ></a>
</td>
Repeat for all tds where view_history_details function call exists.
DEMO
function view_history_details (ctrl) {
$('.view-details').slideUp('fast');
$(ctrl).closest('tr').next('.view-details').slideToggle('slow');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
View Details
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
View Details
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
View Details
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
</table>