Develop Reference

trying to remove the date from all thr rows of my table

with javascript, i am trying to get rid of all the dates and only keeping the time from all my rows of the table
here is the screenshot i am taking about
i cannot use the id or class of the td because its dynamic.
i am trying to ynderstand how can i loop it over to make it work
here is my piece of code i have
var header = document.getElementsByClassName('flightData1')[0];
var dateField = ?
also trying to add some condition here that if the records are not in todays date, remove those rows
here is my html
<table border="0" cellpadding="0" id="iFlightTable" class="cellpadding3 styled-table">
<tbody>
<tr class="flightData1" id="AS 2224_2023-02-09T21:17:00_Anchorage_row">
<td id="Alaska Air"> Alaska</td>
<td> 2224</td>
<td> Anchorage</td>
<td id="1676006220000"> 9:17P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 2224_2023-02-09T21:17:00_bags"> </td>
<td id="AS 2224_2023-02-09T21:17:00_gate">2A</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="flightData2" id="AS 657_2023-02-09T16:35:00_Las Vegas_row">
<td id="Alaska Air"> Alaska</td>
<td> 657</td>
<td> Las Vegas</td>
<td id="1675989300000"> 4:35P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 657_2023-02-09T16:35:00_bags"> </td>
<td id="AS 657_2023-02-09T16:35:00_gate">1</td>
<td> </td>
<td> </td>
<td> </td>
</tr> </tbody>
</table>

let dateFields = document.querySelectorAll('#iFlightTable tr td:nth-child(4)');
dateFields.forEach( field => {
field.innerText = field.innerText.split(/\s/)[0];
});
<table border="0" cellpadding="0" id="iFlightTable" class="cellpadding3 styled-table">
<tbody>
<tr class="flightData1" id="AS 2224_2023-02-09T21:17:00_Anchorage_row">
<td id="Alaska Air"> Alaska</td>
<td> 2224</td>
<td> Anchorage</td>
<td id="1676006220000"> 9:17P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 2224_2023-02-09T21:17:00_bags"> </td>
<td id="AS 2224_2023-02-09T21:17:00_gate">2A</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="flightData2" id="AS 657_2023-02-09T16:35:00_Las Vegas_row">
<td id="Alaska Air"> Alaska</td>
<td> 657</td>
<td> Las Vegas</td>
<td id="1675989300000"> 4:35P 02-09-23</td>
<td> <font class="default"> On Time </font> </td> <!-- -->
<td id="AS 657_2023-02-09T16:35:00_bags"> </td>
<td id="AS 657_2023-02-09T16:35:00_gate">1</td>
<td> </td>
<td> </td>
<td> </td>
</tr> </tbody>

Filtering data in columns from options use jQuery

I work with filtering, and i have issues, i have 4 option input in which i have some data which i need to filter in table, for now i filter data only for one column, but problem is if i will add one more filter, script will not work, and filter data from the last selected value. But i need if i have 2-4 selected values in option data is filtering.
My code:
JS:
$("#cancelFilters").hide();
$('#filterButton').click(function () {
getSelectedVal()
filterData()
filters = [];
$("#cancelFilters").fadeIn();
});
var filters = [];
function getSelectedVal() {
var materialCode = $('#materialCode option:selected').text()
var plantCode = $('#plantCode option:selected').text()
var vsCode = $('#vsCode option:selected').text()
var status = $('#statusCode option:selected').text()
applyFilter(materialCode, 1)
applyFilter(plantCode, 2)
applyFilter(vsCode, 3)
applyFilter(status, 4)
}
function applyFilter(value, id) {
if (value)
filters.push('.column' + id + ':contains(' + value + ')');
}
function filterData() {
if (filters.length > 0) {
var rows = $("#orderListData").find("tr").hide();
filters.forEach(filter => {
$("#orderListData td" + filter).parent().show();
})
}
}
$('#cancelFilters').click(function () {
var $rows = $('#orderListData tr');
$rows.show()
$("#cancelFilters").fadeOut();
});
JSFIddle - https://jsfiddle.net/qunzorez/k3ygL07f/11/
So if in options number 3 u will chosse 023 and tap add filters it's will work, but if i chosse 023 and options number 4 BOOKED it's will filter only booked status, where is problem?

By doing $("#orderListData td" + filter).parent().show() on every filter, you are essentially showing every row that matches EVEN ONE of the filters. While you have to show only those rows which can satisfy ALL filters.
So instead of looping through filters and checking if any td element satisfies it, loop through the rows and check if it satisfies every filter.
Use this code to do so ( Only the filterData function is changed )
$("#cancelFilters").hide();
$('#filterButton').click(function () {
getSelectedVal()
filterData()
filters = [];
$("#cancelFilters").fadeIn();
});
var filters = [];
function getSelectedVal() {
var materialCode = $('#materialCode option:selected').text()
var plantCode = $('#plantCode option:selected').text()
var vsCode = $('#vsCode option:selected').text()
var status = $('#statusCode option:selected').text()
applyFilter(materialCode, 1)
applyFilter(plantCode, 2)
applyFilter(vsCode, 3)
applyFilter(status, 4)
}
function applyFilter(value, id) {
if (value)
filters.push('.column' + id + ':contains(' + value + ')');
}
function filterData() {
if (filters.length > 0) {
var rows = $("#orderListData").find("tr");
rows.hide();
//Check if any row satisfy all filters
$.each(rows, (i, row) => {
if (filters.every(filter => $(row).find(filter).length)) {
$(row).show();
}
})
}
}
$('#cancelFilters').click(function () {
var $rows = $('#orderListData tr');
$rows.show()
$("#cancelFilters").fadeOut();
});
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.row::after {
display: table;
clear: both;
content: "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3"> <input class="form-control" type="text" id="search" placeholder="Search for ...""></div>
<div class=" col-2">
<select class="form-control secondary-select" id="materialCode">
<option></option>
<option>16014344C</option>
<option>16016398A</option>
<option>16009838A</option>
</select>
<p><strong>Material Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="plantCode">
<option></option>
<option>0119</option>
<option>0379</option>
</select>
<p><strong>Plant Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="vsCode">
<option></option>
<option>023</option>
<option>0379</option>
</select>
<p><strong>Value Stream Code</strong></p>
</div>
<div class="col-2">
<select class="form-control secondary-select" id="statusCode">
<option></option>
<option>BOOKED</option>
<option>RELEASED</option>
</select>
<p><strong>Status</strong></p>
</div>
<div class="col-1">
<button id="filterButton" class="button button-clear butt-heith">
Apply filters
</button>
</div>
</div>
<button id="cancelFilters" class="button button-deactivate float-right">
Cancel filters
</button>
<table class="table-editor" id="ordersList">
<thead>
<tr>
<th>Production order code</th>
<th>Material code</th>
<th>Target quantity</th>
<th>Plant code</th>
<th>Value stream code</th>
<th>Status</th>
<th>Release date</th>
<th>Activation date</th>
<th>Booking date</th>
<th>TPT (d)</th>
</tr>
</thead>
<tbody id="orderListData">
<tr>
<td>
14298947
</td>
<td class="column1">
11027174A
</td>
<td>
1
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 06:57:42
</td>
<td></td>
<td>
2020-03-02 08:12:22
</td>
<td>
0.1 </td>
</tr>
<tr>
<td>
80150671
</td>
<td class="column1">
11019682A
</td>
<td>
800
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:02:32
</td>
<td></td>
<td>
2020-03-02 15:30:51
</td>
<td>
0.3 </td>
</tr>
<tr>
<td>
80150672
</td>
<td class="column1">
15000987A
</td>
<td>
503
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:28:04
</td>
<td></td>
<td>
2020-03-13 00:00:00
</td>
<td>
10.6 </td>
</tr>
<tr>
<td>
80150673
</td>
<td class="column1">
11011572E
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:30:32
</td>
<td></td>
<td>
2020-03-06 00:00:00
</td>
<td>
3.6 </td>
</tr>
<tr>
<td>
80150674
</td>
<td class="column1">
18300753C
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:30:57
</td>
<td></td>
<td>
2020-03-10 00:00:00
</td>
<td>
7.6 </td>
</tr>
<tr>
<td>
80150675
</td>
<td class="column1">
11014966C
</td>
<td>
153
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
RELEASED
</td>
<td>
2020-03-02 08:31:26
</td>
<td></td>
<td></td>
<td>
</td>
</tr>
<tr>
<td>
80150676
</td>
<td class="column1">
11014264D
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:33:48
</td>
<td></td>
<td>
2020-03-06 00:00:00
</td>
<td>
3.6 </td>
</tr>
<tr>
<td>
80150677
</td>
<td class="column1">
18300753C
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:34:16
</td>
<td></td>
<td>
2020-03-10 00:00:00
</td>
<td>
7.6 </td>
</tr>
<tr>
<td>
80150678
</td>
<td class="column1">
11020109B
</td>
<td>
79
</td>
<td class="column2">
</td>
<td class="column3">
</td>
<td class="column4">
RELEASED
</td>
<td>
2020-03-02 08:34:38
</td>
<td></td>
<td></td>
<td>
</td>
</tr>
<tr>
<td>
80150679
</td>
<td class="column1">
15001454B
</td>
<td>
100
</td>
<td class="column2">
</td>
<td class="column3">
023
</td>
<td class="column4">
BOOKED
</td>
<td>
2020-03-02 08:37:59
</td>
<td></td>
<td>
2020-03-12 00:00:00
</td>
<td>
9.6 </td>
</tr>
</tbody>
</table>

Javascript Select anchors with attributes that contain word

I am trying to only select a specific set of links in a table. I figure that the best way to do it is by selecting them by the title attribute that contains all contain the word 'ULD'.
Here is my code the allowed me to narrow it down to all links in a table but no further. I tried querySelectorAll() and selectElementsbyTitle but had no luck. Also keep in mind this needs to work in IE11 and no JQuery.
var tabl = document.getElementById("Func15543_tblMissedBagReport");var anchors = tabl.getElementsByTagName("a");
Here are the links I want to select out of the following table:
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SELAZ5 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="-5893118207572745590"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SELAZ5
</A>
Here is a sample of the table:
Missed Bag Report
<img src="../Content/images/icons/excel.gif" border="0" alt="Click to export to excel." title="Click to export to excel." height="13" width="13">
</a>
</SPAN>
<SPAN CLASS="CaptionRight">
<SPAN ID="Func15543_PagingControlOne"></SPAN>
</SPAN>
</CAPTION>
<THEAD>
<TR>
<TH ROWSPAN="2">#</TH>
<TH COLSPAN="5">Destination</TH>
<TH ROWSPAN="2">Load<BR>Create<BR>Sort</TH>
<TH ROWSPAN="2">Bag Close Time</TH>
<TH ROWSPAN="2">Age > 90 min (Red)</TH>
<TH ROWSPAN="2">Bag Tag #</TH>
<TH ROWSPAN="2">Pkgs<BR>in<BR>Bag</TH>
</TR>
<TR>
<TH>Cntry<BR>Code</TH>
<TH>SLIC</TH>
<TH>Sort</TH>
<TH>Serv Lvl</TH>
<TH>Location</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD CLASS="CenterText ">1</TD>
<TD CLASS="CenterText ">US</TD>
<TD CLASS="CenterText ">4009 </TD>
<TD CLASS="CenterText ">D</TD>
<TD CLASS="CenterText ">2DA</TD>
<TD CLASS="CenterText ">GRADE LANE HUB </TD>
<TD CLASS="CenterText ">T</TD>
<TD CLASS="CenterText ">
12/14/18 4:12 PM
</TD>
<TD CLASS="WhiteText CenterText G_CLR_Green5 ">
56 Mins. Old
</TD>
<TD CLASS="CenterText ">
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SELAZ5 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="-5893118207572745590"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SELAZ5
</A>
</TD>
<TD class="CenterText "> 6</TD>
</TR>
<TR>
<TD CLASS="CenterText G_CLR_6">2</TD>
<TD CLASS="CenterText G_CLR_6">US</TD>
<TD CLASS="CenterText G_CLR_6">0759 </TD>
<TD CLASS="CenterText G_CLR_6">N</TD>
<TD CLASS="CenterText G_CLR_6">GRD</TD>
<TD CLASS="CenterText G_CLR_6">SADDLEBROOK </TD>
<TD CLASS="CenterText G_CLR_6">T</TD>
<TD CLASS="CenterText G_CLR_6">
12/14/18 4:15 PM
</TD>
<TD CLASS="WhiteText CenterText G_CLR_Green5">
53 Mins. Old
</TD>
<TD CLASS="CenterText G_CLR_6">
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SEL3I0 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="8922482455613715109"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SEL3I0
</A>
</TD>
<TD class="CenterText G_CLR_6"> 6</TD>
</TR>

You can use querySelectorAll with an attribute selector [attr] and a contains flag *=:
var table = document.querySelector('table');
var links = table.querySelectorAll('a[title*="ULD"]');
console.log(links);
<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>

Jquery trying to get value from inner table inside tr

<tr role="row" class="odd">
<td style="background-color:white">
<table>
<tbody>
<tr data-row-id="22">
<td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22"><label class="pid 8843">8843</label></td>
<td style="width: 120px">QCH/H3E/TCZN0D </td>
<td style="width: 270px">Territory Health Intermediate Hospital 500 With Essential Extras </td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-success 8843 pull-right" id="approve-row" data-id="22" href="javascript: void(0)" style="display:none">
<i class="glyphicon glyphicon-plus">Approve</i>
</button>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding:0">
<table>
----
</table>
</td>
</tr>
I am using jQuery datatable and in each row I have tables with inner tables.
I am able to get the required table from the datatable list using:
$(this).closest('table').closest('table tr')[0]
But I am not able to get the pid value which is inside
<label class="pid 8843">
I want to find the pid value. Each row has different pid values. For example:
<label class="pid 2">
<label class="pid 3">
<label class="pid 4">
...
I have found the correct tr in which my pid value resides but how to get the pid value is a problem.
Any help would be appreciated.

if the structure is same in you table, just target label and class to get that attr,, like this:
:EDIT (target input, even better)
$( $(this).closest('table').closest('table tr')[0] ).find('input').val()
try again please

Try this:
$('button').closest('table').find('tr:first td:first').find('label').attr('class')
console.log($('button').closest('table').find('tr:first td:first').find('label').attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td id="pid"><input type="checkbox" class="sub_chk" value="8843" data-id="22"><label class="pid 8843">8843</label></td>
<td style="width: 120px">QCH/H3E/TCZN0D </td>
<td style="width: 270px">Territory Health Intermediate Hospital 500 With Essential Extras </td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-success 8843 pull-right" id="approve-row" data-id="22" href="javascript: void(0)">
<i class="glyphicon glyphicon-plus">Approve</i>
</button>
</td>
</tr>
</tbody>
</table>

HTML:Highlight selected link or label

In my Html Page I need to keep the link selected when i click on it:
The HTML Code:
<table class="main-dev">
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelA
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelB
</a>
</td>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelC
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelD
</a>
</td>
</tr>
</table>
The Other option is to change the link with simple label, and need to keep the label selected when click on it:
The Html code will be:
<table class="main-dev">
<tr>
<td>
labelA
</td>
</tr>
<tr>
<td>
labelB
</td>
</td>
</tr>
<tr>
<td>
labelC
</td>
</tr>
<tr>
<td>
labelD
</td>
</tr>
</table>

you can do this easily with JQ . see snippet below
if you want to remove selected class when click again on the same link, change addClass to toggleClass
var link = $(".titleForm")
$(link).on("click",function() {
var otherLinks = $(this).parents("tr").siblings().find(".selected")
$(this).addClass("selected")
$(otherLinks).removeClass("selected")
})
.selected {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="main-dev">
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelA
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelB
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelC
</a>
</td>
</tr>
<tr>
<td>
<a class='titleForm' style="cursor:pointer">
labelD
</a>
</td>
</tr>
</table>