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>
Related
On my html I have multiple tables, which are for different valuations. The results of those valuations are supposed to be in another table. The text of valuation_all in the tables.taglist should be transferred into another table. I'm really lost here. Newby with this topic so I'll appreciate every help!
Table for summary results
<table id="results" class="summary">
<th>Test</th>
<th>result</th>
<tr>
<td>E-01</td>
<td>text</td>
</tr>
<tr>
<td>E-02</td>
<td>text</td>
</tr>
</table>
Tables of valuation
<p>
<table id="results1" class="taglist">
<th>Name</th>
<th>result</th>
<tr>
<td class="valuation">FAIL</td>
<td rowspan=2 class="valuation_all">FAIL</td>
</tr>
<tr>
<td class="valuation">PASS</td>
</tr>
</table>
</p>
<p>
<table id="results2" class="taglist">
<th>Name</th>
<th>result</th>
<tr>
<td class="valuation">x</td>
<td class="valuation_all" rowspan=2>OPEN</td>
</tr>
<tr>
<td class="valuation">x</td>
</tr>
</table>
</p>
Assuming your results list tables are ordered the same way you ordered rows in your global results table, you can perform a forEach on all .valuation_all, and then mirror each text on the global results table:
const resTables = document.querySelectorAll('.valuation_all')
const results = document.querySelectorAll('#results tr > td + td')
resTables.forEach( function(el, i) {
results[i].textContent = el.textContent
})
<table id="results" class="summary">
<tr>
<th>Test</th><th>result</th>
</tr>
<tr>
<td>E-01</td><td>text</td>
</tr>
<tr>
<td>E-02</td><td>text</td>
</tr>
</table>
<hr>
<table id="results1" class="taglist">
<tr>
<th>Name</th><th>result</th>
</tr>
<tr>
<td class="valuation">FAIL</td><td rowspan="2" class="valuation_all">FAIL</td>
</tr>
<tr>
<td class="valuation">PASS</td>
</tr>
</table>
<table id="results2" class="taglist">
<tr>
<th>Name</th><th>result</th>
</tr>
<tr>
<td class="valuation">x</td><td class="valuation_all" rowspan="2">OPEN</td>
</tr>
<tr>
<td class="valuation">x</td>
</tr>
</table>
Please consider using data attributes for better matching.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
I am using partially VueJS in Laravel.
In blade:
#foreach ($mileagelogv2 as $mileage)
<tr>
<td>#if(isset(json_decode($mileage->data)->driver_name) && !empty(json_decode($mileage->data)->driver_name))
{{json_decode($mileage->data)->driver_name}}
#else
--
#endif
</td>
<td>#if(isset(json_decode($mileage->data)->date) && !empty(json_decode($mileage->data)->date))
{{json_decode($mileage->data)->date}}
#else
--
#endif
</td>
<td>{{\Carbon\carbon::parse($mileage->created_at)->format('d/m/Y H:i:s')}}</td>
<td>{{$mileage->createdBy->name}}</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
"
#click="updateMileageLogV2({{$mileage->id}}, $event)"
>
Complete
</a>
</td>
</tr>
#endforeach
Rendered Output:
<table class="mileagelogv2_panel">
<thead>
<tr>
<th>Driver Name</th>
<th>Date</th>
<th>Created At</th>
<th>Created By</th>
<th>Action</th>
</tr>
</thead>
<tbody class="mileagelogv2_panel">
<tr>
<td> Testing 2 u
</td>
<td> 10/08/2019
</td>
<td>10/08/2019 07:45:49</td>
<td>Gufran Hasan</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
">
Complete
</a>
</td>
</tr>
<tr>
<td> Testing 2
</td>
<td> 10/08/2019
</td>
<td>10/08/2019 07:45:08</td>
<td>Gufran Hasan</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
">
Complete
</a>
</td>
</tr>
<tr>
<td> Testing
</td>
<td> 10/08/2019
</td>
<td>10/08/2019 07:25:28</td>
<td>Gufran Hasan</td>
<td>
<a class="
list__item__actions__btn
list__item__actions__btn--edit
">
Complete
</a>
</td>
</tr>
</tbody>
</table>
In js file:
updateMileageLogV2: function updateMileageLogV2(id, event){
let item_id = id;
var $this = this;
$this.remove();
}
My question is:
When I click on Complete button then the corresponding row should delete.
But unfortunately it is not working.
Finally, I have found solution.
I write this line in VueJs method:
event.path[2].remove();
In VueJs Method:
updateMileageLogV2: function updateMileageLogV2(id, event){
let item_id = id;
event.path[2].remove();// remove current tr row on click.
}
Explanation:
See in screenshot, event.path has array of DOM list.
At 0 index a tag
At 1 index td tag
AT 2 index tr tag
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/
I have a table html code that comes from out source via ajax like this:
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
I want to get value of country value in this html. Jquery nth-child can find but I could not find. I find nht tr item but can not find value ("abc") of country.
Not sure what you want to do with it, but if you want to get the second td of a tr that contains Country, use the following $("table tr:contains(Country) td:eq(1)").text()
Demo
var text = $("table tr:contains(Country) td:eq(1)").text();
console.log(text)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
let country = document.querySelectorAll("tr")[1].querySelectorAll("td")[1].innerText;
document.querySelectorAll("tr")[1] (second tr)
.querySelectorAll("td")[1] (second td in second tr)
.innerText (gets value)
How about following selector:
$( "table.stripped tr:nth-child(2) td:nth-child(2)" ).val();
The only real reference point besides nth-child is your text headings.
Since this is the case we can just look through your table cells for the heading Date and then get the text from the following cell (that cell's index + 1).
It should be pointed out that this is less than ideal. This solution, like every other one we can offer given the circumstances, can very easily be defeated if mark-up changes in the future. Just something to keep in mind, though I do understand that sometimes you have no choice.
$("td").each(function(ind, ele) {
if(ele.textContent === "Date"){
console.log("date is", $("td").eq(ind+1).text() );
}});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
Code: http://tpcg.io/Vy9IwJ
<script>
$(document).ready(function() {
$(".stripped td").get().forEach(function(entry, index, array) {
if ($(entry).text()=='Country') {
$('#result').html( $('#result').html()+'Country: '+$(entry).next().text() );
}
});
});
</script>
<div id="result">
</div>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
Using
var row = table.insertRow(id);
how can I specify that the new row goes under the used chosen ID, rather than a hardcoded index or at the end of the table? I have a drop down that has different options of what row id to place your new row under. The drop down options have matching ids to the related rows. Thanks. Here is my table, I want the new row go go under the user selected father (father3, father4, or father5)
<table id="shore_tab" border="1">
<tr class="row_blue_bold father" id="father3">
<td colspan="2" class="father_header">Category 3</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son3">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father3, category 3)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son3">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father3, category 3)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold father" id="father4">
<td colspan="2" class="father_header">Category 4</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son4">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father4, category 4)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son4">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father4, category 4)</td>
<td class="cell_50"> </td>
</tr>
</table>
You can use the id to get the index
var row = table.insertRow(document.getElementById(id).rowIndex+1);//+1 to be inserted under
id should be index, that is: table.rows is like an Array (it's not actually an Array, but behaves like one).