I'm having a trouble, why in my console didn't reflect the other td values title and date, it only reflects the id of my table. It would be great if anybody could figure out where I am doing something wrong. thank you so much in advance
table tbody
<tbody>
{% csrf_token %}
{% for folder in folder_list %}
<tr>
<td> <i class="fas fa-edit fa-lg"></i></td>
<td data-target="title">{{folder.title}}</td>
<td data-target="date_upload">{{folder.date_upload}}</td>
</tr>
{% endfor %}
</tbody>
script
$(document).on('click', 'a[data-role=updategalleryss]', function(){
var id = $(this).data('id');
var title = $('#'+id).children('td[data-target=title]').text();
var dateto = $('#'+id).children('td[data-target=date_upload]').text();
console.log(id) #it only read this
console.log(title)
console.log(dateto)
});
document.getElementById(id).querySelector('td[data-taget="title"]').innerText
or
$("#"+id).find("td[data-taget=title]").text()
you can get title of td
You can use $(this).parent("td").siblings() to get datas from other tds where a tag is clicked.
Demo Code :
$(document).on('click', 'a[data-role=updategalleryss]', function() {
var id = $(this).data('id');
//use this ->parent td -> siblings
var title = $(this).parent("td").siblings('td[data-target=title]').text();
var dateto = $(this).parent("td").siblings('td[data-target=date_upload]').text();
console.log(id)
console.log(title)
console.log(dateto)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td> <i class="fas fa-edit fa-lg">edit</i></td>
<td data-target="title">somthing</td>
<td data-target="date_upload">ok</td>
</tr>
<tr>
<td> <i class="fas fa-edit fa-lg">edit</i></td>
<td data-target="title">somthing2</td>
<td data-target="date_upload">ok2</td>
</tr>
<tr>
<td> <i class="fas fa-edit fa-lg">edit</i></td>
<td data-target="title">somthing3</td>
<td data-target="date_upload">ok3</td>
</tr>
</tbody>
</table>
Related
I have a button on a page that I want to only show rows that have a certain class (target-class in my example) within them. If you press the button again, then all rows are shown.
I'm not sure how to check if target-class is within <tr class="show-hide-this-one">
<button id="btn-toggle_target" type="button">Show Targets Only</button>
<table>
<tbody>
{% for item in first_list %}
<tr class="show-hide-this-one">
<td> {{ item.title }} </td>
<td>
<table><tbody>
{% for subitem in item.sublist %}
<tr>
<td>
{{ subitem.value }}
{% if value == 0 %}
<span class="target-class"> Looking for this one </span>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody></table>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<script type="text/javascript">
function toggleTarget() {
$btnToggle = $("#btn-toggle_target")
var showTargetOnly = $btnToggle.hasClass("target-only")
if (showTargetOnly) {
$btnToggle.html("Show Targets Only").removeClass("target-only");
$().show();
}
else {
$btnToggle.html("Show All Records").addClass("target-only");
$().hide();
}
}
(function () {
$("#btn-toggle_target").on('click', function() {
toggleTarget();
});
}());
</script>
it was not so easy because you dont have class or id but with a little loop its ok:
$("#btn-toggle_target").on('click', function() {
toggleTarget();
});
function toggleTarget() {
var showTargetOnly = $("#btn-toggle_target").hasClass("target-only");
if (showTargetOnly) {
$("#btn-toggle_target").html("Show Targets Only").removeClass("target-only");
$(".show-hide-this-one table tr").show();
}
else {
$("#btn-toggle_target").html("Show All Records").addClass("target-only");
$(".show-hide-this-one table td").each(function(){
if($(this).find(".target-class").length == 0) $(this).closest("tr").hide();
})
//this loop coul be replaced by
//$(".show-hide-this-one table td:not(:has(.target-class))").closest("tr").hide();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-toggle_target" type="button">Show Targets Only</button>
<table>
<tbody>
<tr class="show-hide-this-one">
<td> Item 1 </td>
<td>
<table><tbody>
<tr>
<td>
0
<span class="target-class"> Looking for this one </span>
</td>
</tr>
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr class="show-hide-this-one">
<td> Item 2 </td>
<td>
<table><tbody>
<tr>
<td>
4
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
i think, you could replace this loop :
$(".show-hide-this-one table td").each(function(){
if($(this).find(".target-class").length == 0) $(this).closest("tr").hide();
})
by
$(".show-hide-this-one table td:not(:has(.target-class))").closest("tr").hide();
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 have this table in my page that I fetch by using AJAX request.
<table>
<tbody>
<tr>
<th>No</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Example Name 1</td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" value="2">
Delete
</a>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>Example Name 2</td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" value="1">
Delete
</a>
</div>
</td>
</tr>
</tbody>
</table>
So I'm trying to get the anchor value when the button is clicked. So I make a function like this :
function deleteParticipantFunction(){
var result = confirm('You are about to delete this participant. Continue?');
if(result){
var participant_id = $(this).val();
console.log(participant_id);
}
};
But I'm not able to get the value. What is the correct way to fetch the value in the function?
Pass id direct to method:
<a href="javascript:;" onclick="deleteParticipantFunction(1)" class="delete-participant">
Then Yours js methods will be simpler:
function deleteParticipantFunction(participant_id){
var result = confirm('You are about to delete this participant. Continue?');
if(result){
//delete smth by id
}
};
Anchor elements don't have a value attribute. That's something one finds on form inputs. Instead, you can put the value in a data-* attribute:
<a href="javascript:;" onclick="deleteParticipantFunction()" class="delete-participant" data-participant="1">
Delete
</a>
And retrive it from the data() function:
var participant_id = $(this).data('participant');
Though, thinking about it, when calling the function like that, is this even the correct context? I guess I haven't had to try that in a while so I don't know off the top of my head. But fortunately you're already using jQuery, so why not just use jQuery? Rather than put the function call on every element in an onclick attribute, use jQuery to bind a function to the click event(s):
<a href="javascript:;" class="delete-participant" data-participant="1">
Delete
</a>
and:
$(document).on('click', '.delete-participant.', function () {
var result = confirm('You are about to delete this participant. Continue?');
if(result){
var participant_id = $(this).data('participant');
console.log(participant_id);
}
});
Which has the added benefit of de-cluttering your markup.
function deleteParticipantFunction(e){
var result = confirm('You are about to delete this participant. Continue?');
if(result){
var participant_id = this;
console.log(e.value);
//e.parentNode.parentNode.parentNode.remove()
}
};
<table>
<tbody>
<tr>
<th>No</th>
<th>Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Example Name 1</td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<button href="javascript:;" onclick="deleteParticipantFunction(this)" class="delete-participant" value="2">
Delete
</button>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>Example Name 2</td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<button href="javascript:;" onclick="deleteParticipantFunction(this)" class="delete-participant" value="1">
Delete
</button>
</div>
</td>
</tr>
</tbody>
</table>
hello can someone help me with this. the search is working
but how can i exclude the last column to be searched?
i have three columns, first name, lastname and email.
what i want is to search using the two columns only. and exclude the column email when searching. thank you
this is my javascript code
<script type="text/javascript">
function doSearch() {
var searchText = document.getElementById('searchTerm').value;
var targetTable = document.getElementById('report');
var targetTableColCount;
//Loop through table rows
for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++ ) {
var rowData = '';
//Get column count from header row
if (rowIndex == 0) {
targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
continue; //do not execute further code for header row.
}
//Process data rows. (rowIndex >= 1)
for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
var cellText = '';
if (navigator.appName == 'Microsoft Internet Explorer')
cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).innerText;
else
cellText = targetTable.rows.item(rowIndex).cells.item(colIndex).textContent;
rowData += cellText;
}
// Make search case insensitive.
rowData = rowData.toLowerCase();
searchText = searchText.toLowerCase();
//If search term is not found in row data
//then hide the row, else show
if (rowData.indexOf(searchText) == -1)
targetTable.rows.item(rowIndex).style.display = 'none';
else
targetTable.rows.item(rowIndex).style.display = 'table-row';
}
}
</script>
and this is my html code
<input id="searchTerm" class="form-control" placeholder="Enter text" onkeyup="doSearch()">
<table id="report" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
i have another question. i added an expandable row on my html table
and now the search doesnt give the desired output. example when i search for a value that are not on the html table it just remove the first row and show the rest of the row. which is not the correct output.
<table id="report" class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr><td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr><td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr><td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td>
</tr>
</tbody>
</table>
sir roman after integrating you're code to mine. the search is now working as expected. but when the searchterm input is empty and i press backspace on it. it became like this
https://jsfiddle.net/t6xg97uo/
I believe this should answer your issue. I am simply adjusting how many columns you are searching:
for (var colIndex = 0; colIndex < (targetTableColCount-1); colIndex++) {
Here is an example:
http://codepen.io/anon/pen/PNWNmL
Update
Ok, I am not sure this is the right fix for what you are looking for, but I just commented out the code that is causing that button to be revealed when backspacing. Here is what I did:
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr>
<!-- <td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td> -->
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr>
<!-- <td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td> -->
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>
<div class="arrow"><a id="menu-toggle" href="#" ><i class="glyphicon glyphicon-plus-sign"></i></a></div>
</td>
</tr>
<tr>
<!-- <td colspan="4">
<button type="button" class="btnview btn btn-xs btn-warning" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>View
</button>
</td> -->
</tr>
</tbody>
And here is a jsfiddle:
https://jsfiddle.net/t6xg97uo/1/
Solution including you additional requirement(with an expandable row within a table):
- replace your nested for loop(through row columns) as shown below:
(you should also skip rows which have only one cell(td) from processing)
...
var rowCells = targetTable.rows.item(rowIndex).cells, cellsLen = rowCells.length;
if (cellsLen > 1) {
for (var colIndex = 0; colIndex < 2; colIndex++) {
var cellText = '';
if (targetTable.rows.item(rowIndex).cells.item(colIndex)) {
cellText = rowCells.item(colIndex)[(navigator.appName == 'Microsoft Internet Explorer')? "innerText" : "textContent"];
}
rowData += cellText;
}
}
// Make search case insensitive.
rowData = rowData.toLowerCase().trim();
searchText = searchText.toLowerCase();
//If search term is not found in row data
//then hide the row, else show
if (cellsLen > 1) {
if (searchText && rowData.indexOf(searchText) === -1) {
targetTable.rows.item(rowIndex).style.display = 'none';
} else {
targetTable.rows.item(rowIndex).style.display = 'table-row';
}
}
...
I want to use the if-directive in vue.js to determine which datafield should be shown in each table row:
<tr v-repeat="model">
<td>#{{ title }}</td>
<td>#{{ publish_date_start }}</td>
<td v-if="model.publish = 1"><span class="fa fa-check"></span></td>
<td v-if="model.publish = 0"><span class="fa fa-remove"></span></td>
<td class="data-list-action">edit</td>
<td class="data-list-action">delete</td>
</tr>
If the value of the property 'publish' is 1, the datafield with the check has to be shown. If 0, it has to be the a cross.
How can I compare 'model.publish' to a value?
UPDATE: Fiddle
Try with v-if:
<td v-if="publish"><span class="fa fa-check">Check</span></td>
<td v-if="!publish"><span class="fa fa-remove">Cross</span></td>
Fiddle: http://jsfiddle.net/8wy7w560/3/