Develop Reference

jQuery: Change <a> to <input> when clicking adjacent <a> in <table>

Using jQuery, how can I do the following when clicking the edit icon in the third column:
Change the text in the adjacent second column to an input box
Change the icon class in the third column to a save button
Change the original text in the second column to what was entered into the input box
(Sorry if that's confusing and/or a lot to ask!)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal-body">
<form>
<table id="modalLinks" class="table table-hover">
<thead align="left">
<tr>
<th scope="col">Name</th>
<th scope="col-xs-4">URL</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody align="left">
<tr>
<th scope="row" id="modalLinkName">Link 1</td>
<td>
<a id="modalLinkURL">https://www.link1.com</a>
<input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a id="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<th scope="row" id="modalLinkName">Link 2</td>
<td>
<a id="modalLinkURL">https://www.link2.com</a>
<input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a id="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<th scope="row" id="modalLinkName">Link 3</td>
<td>
<a id="modalLinkURL">https://www.link3.com</a>
<input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a id="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>

First there are a few issues to fix in your HTML:
id attribute values must be unique in HTML. Use class names instead for where you currently have duplicates.
you have <th> opening tags that are closed with </td>
With those changes, you could use this click handler:
$(".modalEditLink").click(function () {
if ($(this).find(".fa-pen").length) { // edit operation:
var $a = $(this).closest("tr").find(".modalLinkURL");
var $inp = $("<input>").addClass("editURL").val($a.text());
$a.replaceWith($inp);
$inp.focus();
$(this).find(".fas").removeClass("fa-pen").addClass("fa-save");
} else { // save operation:
var $inp = $(this).closest("tr").find(".editURL");
var $a = $("<a>").addClass("modalLinkURL").text($inp.val());
$inp.replaceWith($a);
$(this).find(".fas").removeClass("fa-save").addClass("fa-pen");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<table id="modalLinks" class="table table-hover">
<thead align="left">
<tr>
<th scope="col">Name</th>
<th scope="col-xs-4">URL</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody align="left">
<tr>
<td scope="row" class="modalLinkName">Link 1</td>
<td>
<a class="modalLinkURL">https://www.link1.com</a>
<input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a class="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<td scope="row" class="modalLinkName">Link 2</td>
<td>
<a class="modalLinkURL">https://www.link2.com</a>
<input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a class="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</td>
</tr>
<tr>
<td scope="row" class="modalLinkName">Link 3</td>
<td>
<a class="modalLinkURL">https://www.link3.com</a>
<input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
</td>
<td>
<a class="modalEditLink" href="#">icon
<i class="fas fa-pen"></i>
</a>
</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>

Triggering a custom event in Jquery

Having this anywhere in the code :
$(".dates > tr > td > .notInTheMonth").bind('click', '.notInTheMonth', function() {
...
$(this).one("updatedCalendar",function(){
$(this).addClass("active");
})
});
To trigger it, i've tried this :
$(".dates > tr > td > .notInTheMonth").trigger("updatedCalendar");
Why it will not work and how to make it work ?
EDIT
Here is the html :
<body>
<div class="planner">
<div class="calendar">
<div class="calendar-header">
...
</div>
<table class="itemsCalendar">
<thead>
<tr>
<th>
Lun
</th>
...
</tr>
</thead>
<tbody class="dates">
<tr>
<td>
<span class="notInTheMonth">25</span>
</td>
<td>
<span class="notInTheMonth">26</span>
</td>
...
</tr>
<tr>
<td>
<span class="today">2</span>
</td>
<td>
<span date="3-4-2016" class="">3</span>
</td>
...
</tr>
<tr>
[...]
</tr>
<tr>
<td>
<span date="30-4-2016">30</span>
</td>
<td>
<span date="31-4-2016">31</span>
</td>
<td>
<span class="notInTheMonth">1</span>
</td>
<td>
<span class="notInTheMonth">2</span>
</td>
<td>
<span class="notInTheMonth">3</span>
</td>
<td>
<span class="notInTheMonth">4</span>
</td>
<td>
<span class="notInTheMonth">5</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Everything is generated by javascript. It will output a planner, with the correct day according to the month and the years

how to show next row with classname in table which are hide using jquery

please let me know how to remove class hide from nextall sublevel when click on mainlevel. It should not remove hide class from other sublevel which is next to mainlevel. please check the table structure below:
<table>
<tbody>
<tr>
<td>
<a class="mainlevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
<tr>
<td>
<a class="mainlevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
</tbody>
</table>

If interpret Question correctly ? , try using .closest() to select parent of clicked element , .nextUntil() , :has() to select tr elements until next mainlevel , .find() to select .hide elements , .toggle() to toggle display of hide elements
$(".mainlevel").click(function() {
$(this).closest("tr").nextUntil("tr:has(.mainlevel)").find(".hide").toggle()
})
.hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<a class="mainlevel">click</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">a</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">b</a>
</td>
</tr>
<tr>
<td>
<a class="mainlevel">click</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">c</a>
</td>
</tr>
</tbody>
</table>

JQuery Slide Toggle Close and Open Issue

First of all , please bear with me about my bad english :(
I am listing data in a table using for-each loop and above HTML will generate if use to slideToggle then it open fine.
but if another row open then last one still open , i want to open a new one but close previous.
function view_history_details ( ) {
$('#view-details').slideToggle();
}
<table>
<tr>
<td>
<a href="javascript:;" onclick="view_history_details()" title="View" data-keyboard="false" ></a>
</td>
</tr>
<tr style="display:none" class="view-details">
some text
</tr>
<tr>
<td>
<a href="javascript:;" onclick="view_history_details()" title="View" data-keyboard="false" ></a>
</td>
</tr>
<tr style="display:none" class="view-details">
some text
</tr>
<tr>
<td>
<a href="javascript:;" onclick="view_history_details()" title="View" data-keyboard="false" ></a>
</td>
</tr>
<tr style="display:none" class="view-details">
some text
</tr>
</table>

You can redesign the solution as below using jQuery event handlers.
We adds a class to the anchor elements which triggers the action, then use that class to register the click handlers. Inside the handler we toggles the next view-details row and hides all other view-details elements
jQuery(function($) {
$('.toggle').click(function(e) {
console.log(this)
e.preventDefault();
var $cur = $(this).closest('tr').next('.view-details').stop().toggle();
$('.view-details').not($cur).stop().hide();
})
})
.toggle {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
togggle
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
togggle
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
togggle
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
</table>

You need to pass particular control to your function so as to slideToggle only that control's view-details element as below:
function view_history_details (ctrl) {
$('.view-details').slideUp();
$(ctrl).closest('tr').next('.view-details').slideToggle();
}
and when calling function from td write it as below and pass this
<td>
<a href="javascript:;" onclick="view_history_details(this)" title="View" data-keyboard="false" ></a>
</td>
Repeat for all tds where view_history_details function call exists.
DEMO
function view_history_details (ctrl) {
$('.view-details').slideUp('fast');
$(ctrl).closest('tr').next('.view-details').slideToggle('slow');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
View Details
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
View Details
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
<tr>
<td>
View Details
</td>
</tr>
<tr style="display:none" class="view-details">
<td>some text</td>
</tr>
</table>