We Keep Coding

Access and Disable/enable input type date in td

I have a table that contains 2 Date type inputs, a span and 2 clickable icons for edit and save. What I am aiming for is to enable the input type date in my td's "onClick" on Edit Icon. But I don't know how to access the element in the td, to alter the disabled attribute. On edit the disabled attribute should be False, and after alteration if he clicks the save icon, the disabled attribute should go back to True. A plus would be for me, if I can make the save icon disabled(not clickable) by default, if the edit button was not clicked first, and after save it goes back to being disabled.
This is my HTML code:
<table class="table table-striped" id="pageNbr">
<thead>
<tr class="header">
<th>Begin Date</th>
<th>End Date</th>
<th>School Year</th>
<th></th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
<td><input type="date" class="EndDate" id="enddate" disabled> </td>
<td> <span id="Syear"> 2021-2022</span></td>
<td style="box-shadow: none !important; background-color: white !important;">
<i class="far fa-save Icon-save"></i>
<a href="#">
<i class="far fa-edit Icon-edit"></i></a>
</td>
</tr>
</tbody>
</table>
My jQuery so far is:
$('.Icon-edit').click(function() {
var currentTD = $(this).parents('tr').find('td');
$.each(currentTD, function() {
$(this).prop();
});
});
$('.Icon-save').click(function() {
var currentTD = $(this).parents('tr').find('td');
$.each(currentTD, function() {
$(this).prop();
});
});

you can assign a class to your row, then get its child td by index:
<tr class="myclass">
<td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
<td><input type="date" class="EndDate" id="enddate" disabled> </td>
<td> <span id="Syear"> 2021-2022</span></td>
<td style="box-shadow: none !important; background-color: white !important;">
<i class="far fa-save Icon-save"></i>
<a href="#">
<i class="far fa-edit Icon-edit"></i></a>
</td>
</tr>
$(".myClass").find("td:eq(4)");
Related Link: Get second td of tr using jquery

You can do this in one event listener and check the class of the one that was clicked to determine disable/enable.
I added classes to the <a> rather than using the <i> and added css to hide the "save" by default then use hide/show to toggle display on the buttons
$('.date-toggle').click(function() {
const $btn = $(this);
const disable = $btn.hasClass('save');
$btn.closest('tr').find('.BeginDate, .EndDate').prop('disabled', disable);
$btn.hide().siblings('.date-toggle').show()
});
.date-toggle.save{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="pageNbr">
<thead>
<tr class="header">
<th>Begin Date</th>
<th>End Date</th>
<th>School Year</th>
<th></th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td><input type="date" class="BeginDate " onchange="fill()" disabled> </td>
<td><input type="date" class="EndDate" id="enddate" disabled> </td>
<td> <span id="Syear"> 2021-2022</span></td>
<td style="box-shadow: none !important; background-color: white !important;">
Save</i>
<a href="#" class="date-toggle edit">
<i class="far fa-edit Icon-edit">Edit</i></a>
</td>
</tr>
</tbody>
</table>

How to have a scroll bar at top and bottom of angular md bootstrap table?

I have an angular MD bootstrap table where I want to have a horizontal scrollbar at the top and bottom of the table.
Following is the code,
<div layout="column" layout-align="center stretch" flex>
<div layout="row" style="margin: 20px;">
<div flex></div>
</div>
<md-table-container flex>
<table md-progress="vm.searchTablePromise" md-table single>
<thead md-sticky
style="background-color:#00a9da;"
md-head md-order="vm.query.order">
<tr md-row>
<th style="color: white;" md-column md-order-by="name">
Name
</th>
<th style="color: white;" md-column md-order-by="id">
ID
</th>
<th style="color: white;" md-column md-order-by="ein">
EIN
</th>
<th style="color: white;" md-column md-order-by="phNumber">
Ph. Number
</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in vm.data">
<td md-cell>
<div style="min-width: 200px;">{{item.name}}</div>
</td>
<td md-cell>
{{item.id}}
</td>
<td md-cell>
<div style="min-width: 80px;">{{item.ein}}</div>
</td>
<td md-cell>
{{item.phNumber}}
</td>
</tr>
</tbody>
</table>
</md-table-container>
</div>
Now, I have a horizontal scroll at the bottom, I also want to have it at the top.
This link provides a solution here but I don't want to have a JS related code for scrolling.
Any help is much appreciated.

Unforunately, there is no way without javascript to have both a scrollbar on top and at the bottom.
It is possible to have a scroll bar on top with css, but that is still only one scrollbar:
md-table-container{
width: 100%;
overflow: scroll;
display: block;
transform: rotate(180deg) scaleX(-1);
}
table{
transform: rotate(180deg) scaleX(-1);
}
The only way to go is to use javascript. And the easiest way to implement it is to use the jQuery Doublescroll plugin
Download the file and include it as ds.js in your html. Here is a full example:
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="ds.js"></script>
<script>
$(function(){
$('#the-table').doubleScroll();
});
</script>
<div layout="column" layout-align="center stretch" style="width:100%; overflow:hidden" flex>
<div layout="row" style="margin: 20px;">
<div flex></div>
</div>
<md-table-container id="the-table" style="width:100%; overflow:scroll; display:block" flex>
<table style="width:100%" md-progress="vm.searchTablePromise" md-table single>
<thead md-sticky
style="background-color:#00a9da;"
md-head md-order="vm.query.order">
<tr md-row>
<th style="color: white;" md-column md-order-by="name">
Name
</th>
<th style="color: white;" md-column md-order-by="id">
ID
</th>
<th style="color: white;" md-column md-order-by="ein">
EIN
</th>
<th style="color: white;" md-column md-order-by="phNumber">
Ph. Number
</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in vm.data">
<td md-cell>
<div style="min-width: 200px;">{{item.name}}</div>
</td>
<td md-cell>
{{item.id}}
</td>
<td md-cell>
<div style="min-width: 80px;">{{item.ein}}</div>
</td>
<td md-cell>
{{item.phNumber}}
</td>
</tr>
</tbody>
</table>
</md-table-container>
</div>

table inside hidden div becomes visible upon appending tr dynamically

$("#zz").click(function() {
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" + $(this).next().html() + "</td></tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>
<button id="zz" >zz</button>
<div id="data_hidden" style="display:none">
<table>
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
<td>
<td>
5
<td>
<td>
6
<td>
</tr>
</table>
</body>
</html>
<tr role="row" class="odd">
<td class="sorting_1">
<img class="plus" id="plus" src="../Images/plus.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th></th>
<th>Established On</th>
<th>Objective</th>
<th>Target Value</th>
<th>Baseline Value</th>
<th>Monitorng mechanism</th>
<th>Target Date</th>
<th>Action Plan</th>
<th>Frequency of Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="add" id="add" src="/Images/add.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th>
Objective Evaluated On
</th>
<th>
Objective Measured Value
</th>
<th>
From Period
</th>
<th>
To Period
</th>
<th>
Trend
</th>
<th>
NCR Ref. (If Objective not achieved)
</th>
<th>
Status of Objective Evaluation
</th>
<th>
Objective Evidence
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8">
<div style="text-align: center;">
<h4 style="color: grey;">No data exists</h4>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
09/07/2019 </td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td>
09/07/2019 </td>
<td>
<p>Not Available</p>
</td>
<td> Annually</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
1
</td>
<td>
<a data-toggle="popover" data-trigger="hover" href="/Objectives/ObjectivesDetails?Objectives_Id=3" id="3" onclick="HyperLinkProgressIconFunction()" data-original-title="" title="">ee</a>
</td>
<td>
2019
</td>
<td>
Department
</td>
<td>
HR DEPARTMENT
</td>
<td>
Shilpa jay bhat,Lavita p Pereira,chandramouli b cc
</td>
<td>
Approved
</td>
<td>
<span class="badge badge-info">No File attached</span>
</td>
<td>
<a href="/Objectives/ObjectivesEdit?Objectives_Id=3" title="Edit Objective details" onclick="HyperLinkProgressIconFunction()">
<span class="badge badge-info">Edit</span>
</a>
</td>
<td>
<span class="badge badge-danger" title="Delete Internal Document" onclick="DeleteItems(3)" style="cursor:pointer;">Delete</span>
</td>
</tr>
The above is just an example of a row from my table.
Upon appending $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='9'>" + $(this).next().html() + "</td></tr>"); on a button click the table becomes visible in the new <tr>
To my extend my knowledge , apparently it's been appended directly to tr since the display is set to none, does the dom elements work like this ?
I'm novice at the most, when it comes to html.
Can Anyone please explain why this happens ?
Any relevant information will greatly appreciated.

Your selection (using html()) returns the contents of the element, not the element itself, so any attributes on the element are also disregarded. One easy fix might be to move your hide styles down a level:
<div id="data_hidden">
<table style="display:none">
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
Demo 1
This leaves the original div element in the DOM, but it doesn't affect appearance.
Alternatively, grab the outerHTML of the selection's raw element:
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>"
+ $(this).next().get(0).outerHTML + "</td></tr>");
});
Demo 2

Use jQuery to search value in a Bootstrap 4's Table inside a collapse

I'm using Bootstrap 4 table inside a collapse, I want to search for a value in the table and if the value is found, open the collapse and show me the row with the value.
<div id="collapseStudents" class="collapse ml-4" aria-labelledby="headingOne" data-parent="#accordionTypes">
<table class="table table-striped table-borderless">
<thead>
<tr>
<th scope="col" class="text border-bottom">N.</th>
<th scope="col" class="text border-bottom">Classe</th>
<th scope="col" class="text border-bottom">Nome e Cognome</th>
<th scope="col" class="text border-bottom">Ruoli</th>
</tr>
</thead>
<tbody>
{% for number, data in students_table.items() %}
<tr>
<th scope="row" class="text">{{number}}</th>
<td class="text"><span class="badge badge-secondary">{{data['class']}}</span></td>
<td class="text">{{data['name']}}</td>
<td class="text roles" style="width: 30%">
<span class="badge badge-danger align-text-top ml-1 admin-chip" style="display: {{none if not 'admin' in data['roles'] else block}}; position: relative; top: 2px;">Admin <a class="text-light chip" href=""><i class="fa fa-times" aria-hidden="true" style="position:relative;top:0.3px" data-role="admin" data-user="{{data['name'] + '-' +number}}"></i></a></span>
</td>
</tr>
{% endfor %}
</tbody>
</table>

You can try with the following script:
$('.table tbody').find('tr').each(function(){
$(this).find('td').each(function(){
if($(this:contains('valueToSearch'))){
$('#collapseStudents').collapse();
// here you can set how to show the row, ex. as bold text
$(this).text('<b>' + $(this).text() + '</b>');
}
});
});

jquery selector inside a table td

here is my html code wordpress that makes a table in my plugin dash page:
<table class="wp-list-table widefat fixed exams">
<thead></thead>
<tfoot></tfoot>
<tbody id="the-list" data-wp-lists="list:exam">
<tr class="alternate">
<th class="check-column" scope="row">
<input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
</th>
<td class="ID column-ID"></td>
<td class="exam_name column-exam_name">
this text is to be selected
<span style="color:red"></span>
<div class="row-actions">
<span class="subjects"></span>
<span class="settings"></span>
<span class="clone"></span>
<span class="users"></span>
<span class="uploads"></span>
</div>
</td>
<td class="total_user column-total_user"></td>
<td class="date_create column-date_create"></td>
<td class="short_code column-short_code"></td>
</tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
</tbody>
</table>
with my jquery code i want to select this text is to be selected only inside td:
$(".exam_cb").click(function() {
$(this).parent("th").next("td").next("td").hide(); // hides td class exam_name
$(this).parent("th").next("td").next("td").text().hide(); // not working
$(this).parent("th").next("td").next("td").html().hide(); // not working
$(this).parent("th").next("td").next("td").val().hide(); // not working
});
what is wrong with me?

You need to select text node by filtering them by nodeType. and then wrap the content in dom element with css display none:
$(this).parent().siblings('.exam_name').contents().filter(function() {
return this.nodeType == 3;
}).wrap('<span style="display:none"></style>');//wrap in span and hide the,
Working Demo

You cannot apply hide on text() - you apply it on an HTML Element
$(this).parent("th").next("td").next("td").hide();
Thats causing a JS Error and hence none of your other statements after that is working
and the same is true for val().hide() - A JS Error will be thrown
$(".exam_cb").click(function() {
var columnmTo=$(this).parent("th").next("td").next("td");
columnmTo.find('.selectedTest').addClass('highlight');
columnmTo.find('.error').hide();
columnmTo.find('.row-actions').hide();
});
span.highlight
{
font-weight:bold;
}
span.error
{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="wp-list-table widefat fixed exams">
<thead></thead>
<tfoot></tfoot>
<tbody id="the-list" data-wp-lists="list:exam">
<tr class="alternate">
<th class="check-column" scope="row">
<input class="exam_cb" type="checkbox" value="22" name="exam[]"></input>
</th>
<td class="ID column-ID"></td>
<td class="exam_name column-exam_name">
<span class="selectedTest">this text is to be selected</span>
<span class="error">Hello</span>
<div class="row-actions">
<span class="subjects">a</span>
<span class="settings">b</span>
<span class="clone">c</span>
<span class="users">c</span>
<span class="uploads">d</span>
</div>
</td>
<td class="total_user column-total_user"></td>
<td class="date_create column-date_create"></td>
<td class="short_code column-short_code"></td>
</tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
<tr></tr>
<tr class="alternate"></tr>
</tbody>
</table>