I have a DataTable and in this table is a cell, which contains multiple span-Elements, like this one:
<span class="btn btn-xs btn-info" data-room="1910" data-id="1" disabled>
<strong>unimportant description</strong>
</span>
I've just put the content of the cell into a variable:
var extras = roomstable.cell(closestRow,3).data();
How can I filter out the IDs in the data-id-Tags to put it into an Array?
I can provide the solution with jquery.
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
As argument you should define your cell, in your case it would be extras. Try to give yours roomstable.cell(closestRow,3). In my case was $('#dt').find('tr').eq(1).find('td').eq(0)
$(function(){
var table = $('#dt').DataTable();
arr_ids($('#dt').find('tr').eq(1).find('td').eq(0));
})
function arr_ids(celll) {
var ar = [];
celll.find('span').each(function(){
if ($(this).data('id')) {
ar.push($(this).data('id'));
}
});
alert(ar);
}
<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>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<table id="dt">
<thead>
<th>aaaaaaaaaaaaaaaaaaaaaa </th>
<th>bbbbbbbbbbbbbbbbbbbbbbb </th>
<th>ccccccccccccccccccccc </th>
</thead>
<tbody>
<tr>
<td>
<span class="btn btn-xs btn-info" data-room="1910" data-id="1" disabled>
<strong>unimportant description</strong>
</span>
<span class="btn btn-xs btn-info" data-room="1945" data-id="13" disabled>
<strong>unimportant description</strong>
</span>
</td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tfoot>
<th>aaaaaaaaaaaaaaaaaaaaaa </th>
<th>bbbbbbbbbbbbbbbbbbbbbbb </th>
<th>ccccccccccccccccccccc</th>
</tfoot>
</table>
If the idea is to extract multiple buttons id's within a cell into an array, you would rather need to employ cell().node() method instead of cell().data().
That would let you grab all the buttons, turn that set toArray() and extract data-id attribute values:
var extras = $(roomstable.cell(closestRow,3).node())
.find('span.btn')
.toArray()
.map(span => $(span).attr('data-id'));
Related
I have an HTML table with some jinja(inside the value attribute).
my template:
<form class="" method="POST">
{% csrf_token %}
<table class="table table-hover my-5">
<thead class="">
<tr>
<th>No</th>
<th>Name</th>
<th>rank</th>
<th>gmail</th>
<th>Delete?</th>
</tr>
</thead>
<tbody class="my_dynamic_table">
{% for i in report_tableA %}
<tr>
<td>i</td>
<td><input type="text" name="name" value="{{ i.name }}"></td>
<td><input type="text" name="rank" value="{{ i.rank }}"></td>
<td><input type="email" name="gmail" value="{{ i.gmail }}"></td>
<td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="row mx-5">
<button class="btn btn-warning">Add row</button>
<button type="Submit" class="btn btn-primary ml-auto">Submit</button>
</div>
</form>
Now my problem is how can I implement the functionality of the Add row button and the Delete icon(inside last td)? Here Add row function will add a new row inside the table also with a blank value attribute.
I have practiced it before by the following stackoverflow link. but now the problem is jinja is also added here.
I will be very grateful if you help me to fix this out.
You can first clone tr whenever Add row button is clicked then use find("input").val("") to empty value attribute and find("td:eq(0)").text(length) to add new i value to first td . Now , when remove is clicked then just use .closest('tr') this will get closest tr and remove that tr . Also, you need to adjust i value again inside your td so use .each loop to iterate through trs and change it.
Demo Code :
$(".add").on("click", function() {
//get length of tr
var length = $(".my_dynamic_table tr").length + 1
console.log(length)
//clone first tr
var cloned = $(".my_dynamic_table tr:first").clone();
$(cloned).find("input").val(""); //empty values of all cloned inputs
$(cloned).find("td:eq(0)").text(length); //add `i` value
$(cloned).appendTo($(".my_dynamic_table")) //append to tbody
})
//onclick of remove button
$(document).on("click", ".remove", function() {
$(this).closest("tr").remove(); //remove tr
//loop through tr
$(".my_dynamic_table tr").each(function(i) {
$(this).find("td:eq(0)").text((i + 1)) //change `i` value
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" method="POST">
<table class="table table-hover my-5">
<thead class="">
<tr>
<th>No</th>
<th>Name</th>
<th>rank</th>
<th>gmail</th>
<th>Delete?</th>
</tr>
</thead>
<tbody class="my_dynamic_table">
<tr>
<td>1</td>
<td><input type="text" name="name" value="{{ i.name }}"></td>
<td><input type="text" name="rank" value="{{ i.rank }}"></td>
<td><input type="email" name="gmail" value="s#gmail.com"></td>
<td><i class="fa fa-times-circle remove" style="font-size: 22px; color: red;">x</i></td>
</tr>
</tbody>
</table>
<div class="row mx-5">
<button class="btn btn-warning add" type="button">Add row</button>
<button type="Submit" class="btn btn-primary ml-auto">Submit</button>
</div>
</form>
I have a button which is named reject and when it is clicked it is supposed to show a form with a text and another button.
Everything is working fine except it only add a cell to the first row only, no matter where the reject button is or whether it in the second or third row it will show the new cell after the first row.
i want the small form to be added in the same row where the reject button was clicked.
this my code:
<table asp-controller="Home" asp-action="Pending" class="table table-bordered table-sm table-striped" id="myTable">
<thead>
<tr>
<th>Id</th>
<th>Email</th>
<th>Status</th>
<th>Check Time</th>
</tr>
</thead>
<tbody id="demo">
#if (Model == null)
{
<tr>
<td colspan="7" class="text-center">No Model Data</td>
</tr>
}
else
{
#foreach (var p in Model)
{
<tr>
<td>#p.Id</td>
<td>#p.Email</td>
#if (#p.CheckOut == null)
{
<td>Offline</td>
<td>#p.CheckIn</td>
}
else
{
<td>Online</td>
<td>#p.CheckOut</td>
}
<td>
<button name="button" value="accept" asp-action="Accept" asp-route-id="#p.Id" class="btn btn-success">Accept Request</button>
<button id="re" class="btn btn-danger" data-id="#p.Id" onclick="fun()">Reject Request</button>
</td>
<td style="display:none;" id="comment">
<form >
<input type="text" name="newcomment" id="newcomment" />
<button name="button" value="reject" asp-action="Reject" asp-route-id="id" class="btn btn-primary">Comment</button>
</form>
</td>
</tr>
}
}
</tbody>
</table>
<script type="text/javascript">
function fun() {
document.getElementById("comment").style.display = 'block';
}
You can use JQuery to show the td area .
Firstly , modify this line :
<button id="re" class="btn btn-danger" data-id="#p.Id" onclick="fun()">Reject Request</button>
To
<button id="re" class="btn btn-danger" data-id="#p.Id" onclick="fun(this)">Reject Request</button>
And modify your js function to find the next td of current button :
function fun(elem) {
$(elem).closest('td').next('td').show();
}
Jquery time picker & Date picker in the table with add row.
jQuery Clone with date picker and time picker & unique id.
In this demo, I can't be showing date picker after editing any row from
cloned textbox please help where I had put the wrong code.
<div class="container">//div start
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-8"><h2>Add Place Details</h2></div>
<div class="col-sm-4">
<button type="button" id = "btn" class="btn btn-info add-field"><i class="fa fa-plus"></i> Add New</button>
</div>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Vehicle</th>
<th>Actions</th>
</tr>
</thead>
<tbody class = "multi-fields" id="elements">
<tr class = "multi-field" id="Meal_00">
<td>
<div class="content datepicker"><input type="text" id="Field_00" class = "datepicker_recurring_start"></div>
</td>
<td><div class="bootstrap-timepicker"><input type="text" id="Field_00" class="form-control timepicker"></div></td>
<td><select class="vehicle form-control"><option value = "vehicle1">vehicle1</option><option value = "vehicle2">vehicle2</option><option value = "vehicle3">vehicle3</option></select></td>
<td><a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>//div end
I have a bootstrap table in which I dynamically display the results of a database search, using Angular's directive ng-repeat. Those results include an email field. I'm trying to display a button to the right of each email cell that would copy the email of that cell into the clipboard.
But that table has no unique Id field, and I don't know how to assign a different id to each row's email field, so that clipboard.js' "data-clipboard-target" knows it has to copy the email of the same row. Right now, every button copies the first row's email, independently of its own row, probably because it looks up the first appearance of the "#emailField" tag.
Any ideas ?
Here's my html file:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="AppCtrl">
<br>
<input type="text" class="form-control" ng-model="query" placeholder="Chercher ici">
<br>
<br>
<h4>Results:</h4>
<table class="table table-striped table-responsive table-condensed table-bordered">
<thead>
<tr>
<th>Client</th>
<th>Contact</th>
<th>Email</th>
<th>Telephone</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in queryResult">
<td>{{ x.client }}</td>
<td>{{ x.contact }}</td>
<td>
<b id="emailField">{{ x.email }}</b>
<button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField">
<span class="glyphicon glyphicon-copy"></span>
</button>
</td>
<td>{{ x.telephone }}</td>
<td>{{ x.mobile }}</td>
</tr>
</tbody>
</table>
<h4>Query status:</h4>
<pre class="ng-binding" ng-bind="queryStatus"></pre>
</div>
<!-- Scripts-->
<script src="./bower_components/clipboard/dist/clipboard.min.js"></script>
<script>
new Clipboard('.btn');
</script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./controller.js"></script>
</body>
Try changing this section of markup:
<td>
<b id="emailField">{{ x.email }}</b>
<button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField">
<span class="glyphicon glyphicon-copy"></span>
</button>
</td>
to this:
<td>
<b id="emailField_{{$index}}">{{ x.email }}</b>
<button type="button" class="btn btn-default pull-right" data-clipboard-target="#emailField_{{$index}}">
<span class="glyphicon glyphicon-copy"></span>
</button>
</td>
You can use the $index that is available inside ng-repeat to create a unique id for each email element.
I have a list of elements in a table. If a button is clicked a modal pops up and to show some content in that modal i need to get the id of the element that was clicked. How can i do that?
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<form action="" method="post">
<table class="table">
<thead>
<tr>
<td width="25%"><strong>Options</strong></td>
<td width="25%"><strong>Block id</strong></td>
<td width="25%"><strong>Block type</strong></td>
<td width="25%"><strong>Block order</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>
<button data-toggle="modal" id="editBlockBtn" data-target="#editBLock" data-block-id="8" class="btn btn-warning btn-mini"></button>
<button data-toggle="modal" id="editBlockBtn" data-target="#deleteBlock" data-block-id="8" class="btn btn-danger btn-mini"></button></td>
<td>8</td>
<td>image</td>
<td>1</td>
</tr>
<tr>
<td>
<button data-toggle="modal" id="editBlockBtn" data-target="#editBLock" data-block-id="9" class="btn btn-warning btn-mini"></button>
<button data-toggle="modal" id="deleteBlockBtn" data-target="#deleteBlock" data-block-id="9" class="btn btn-danger btn-mini"></button></td>
<td>9</td>
<td>image</td>
<td>2</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
You can just write the ID again into a data-attribute on each button. Then you have easy access using jquery's data method. Like so:
PHP:
<button data-toggle="modal" data-target="#editBLock" data-block-id="<?php echo $block['id']; ?>" class="btn btn-warning btn-mini"><i class="icon-edit icon-white"></i></button>
JavaScript:
$('button').click(function() {
var clickedId = $(this).data('block-id');
});
If you can not change your PHP code, and the structure in your table is fixed, you can do it like this:
$('button').click(function() {
var clickedId = $(this).parent().next('td').text();
});
first: id="" is Unique, You can not use it twice in two elements. so change These to classes: editBlockBtn and deleteBlockBtn.
so if you want to get the <td>'s content It is better to add them a class like:
<td class="Block-id">9</td>
<td class="Block-type">image</td>
<td class="Block-order">2</td>
now You can easily get the closest() <tr> parent (or just use parent()):
$('.editBlockBtn').click(function() {
var parentTr = $(this).closest('tr');
});
then you can get the content:
var block_id = parentTr.find('.Block-id').text();
var block_type = parentTr.find('.Block-type').text();
var block_order = parentTr.find('.Block-order').text();
demo: http://jsfiddle.net/gbpkxbvv/