We Keep Coding

jQuery - Get Text after closing anchor tag [duplicate]

This question already has answers here:
How to get text node after element?
(4 answers)
Closed 3 years ago.
I have a table like so:
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
</td>
</tr>
</tbody>
</table>
I am currently using jquery get extract all the names from the data attributes.
However, I also need to see how many times it's referenced (x3, x2 or x1) which are standalone text nodes.
Here is my loop:
jQuery(".child-row123 a[data-name]").each(function(){
var dataname = jQuery(this).data('name');
//Alert
if(!jQuery.isNumeric(dataname)){
alert(dataname);
}
});
Using jQuery, is it possible to get the data-name alongside the text node of x3, x2 or x1? I'm trying figure it out logically and I'm guessing I need to look at the end of each anchor tag?

Try using the DOM function .nextSibling to pick the next node and use nodeValue to get the "referenced (x3, x2 or x1)"
Source: How to get text node after element?
jQuery(".child-row123 a[data-name]").each(function() {
var dataname = jQuery(this).data('name');
var nodetext = jQuery(this)[0].nextSibling.nodeValue;
//Alert
if (!jQuery.isNumeric(dataname)) {
console.log("Data: " + dataname + "\nreferenced: " + nodetext);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
</td>
</tr>
</tbody>
</table>

You can get the info with .nextSibling
jQuery(".child-row123 a[data-name]").each(function() {
var name = this.getAttribute("data-name"), // as the name is a string we don't really need the magic from jQuerys .data()
refs = this.nextSibling.textContent;
console.log(name, refs);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> x3<br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> x2<br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> x1<br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> x3<br>
</td>
</tr>
</tbody>
</table>

What I would do and what you could do if possible. Is wrap your texts inside a span and then get the text with next(). With this solution, instead of having floating texts you have a more structured html.
$(".child-row123 a[data-name]").each(function() {
var dataname = $(this).data('name');
//Alert
if (!$.isNumeric(dataname)) {
console.log(dataname + " " + $(this).next().text());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="40%">
<tbody>
<tr class="child-row123" style="display: table-row;">
<td class="monsters">Monster</td>
<td class="monsters">
<a data-name="Megalosmasher X" target="_blank">Megalosmasher X</a> <span>x3</span><br>
<a data-name="Danger! Nessie!" target="_blank">Danger! Nessie!</a> <span>x2</span><br>
<a data-name="Kuriboh" target="_blank">Kuriboh</a> <span>x1</span><br>
<a data-name="Dark Magician" target="_blank">Dark Magician</a> <span>x3</span><br>
</td>
</tr>
</tbody>
</table>

Column resize with a lot of parent classes

I need to resize columns in a table where each element has a lot of parent divs and classes. These js functions allow me to resize the header / rows in the column once, but not multiple times. HTML tag is at the bottom. Is there a better way to do this?
//This section is to resize columns
var pressed = false;
var start = undefined;
var content = undefined;
var startX, startWidth;
var left, right;
function mouseDownResize(a,b,c,d,e)
{
//function will recieve the correct th id of the div selected and the content div and the divs on either side of the event and the event
start = document.getElementById(a);
content = document.getElementById(b);
//this is getting the div from the td above the selected div. This will diable the urCursorClickable class so that doesn't
//steal the focus of the resize
left = document.getElementById(c).parentElement.previousElementSibling.children[0].clas sList.remove('urCursorClickable');
right = document.getElementById(d).parentElement.previousElementSibling.children[0].clas sList.remove('urCursorClickable');
pressed = true;
startX = parseInt(e.pageX);
startWidth = parseInt(start.style.width);
}
function mouseMoveResize(a,b,e)
{
//function will recieve the correct th id of the div selected and the event
start = document.getElementById(a);
content = document.getElementById(b);
if (pressed) {
start.style.width = parseInt(startWidth + (e.pageX - startX)) + "px";
content.style.width = start.style.width;
}
}
function mouseUpResize(c,d)
{
if (pressed) {
pressed = false;
//this is getting the div from the td above the selected div. This will enable the urCursorClickable class
left = document.getElementById(c).parentElement.previousElementSibling.children[0].classList.add('urCursorClickable');
right = document.getElementById(d).parentElement.previousElementSibling.children[0].classList.add('urCursorClickable');
}
}
<tbody id="21.125-content">
<tr vpm="mrss-hdr" role="row" style="height:20px;">
<td valign="top" role="gridcell" class="urST5OuterOffBrd urBorderBox urStd" colspan="4" style="background-color:transparent!important;border-left-width:1px;border-top-width:1px;border-right-width:2px;border-bottom-width:1px;">
<div id="21.125-mrss-hdr-left" hpm="left" vpm="mrss-hdr" segcc="3" segrc="1" segori="0" segoci="0" class="urSTSHL1 urST4LbHdrBg" style="height:20px;width:100%;overflow:hidden;white-space:nowrap;">
<div bisposelement="X" class="urBorderBox" ioffsettop="0" ioffsetleft="0" style="position:relative;top:0px;float:left;left:0px;">
<table border="0" cellpadding="0" cellspacing="0" class="urST5OuterOffBrd urBorderBox" id="21.125-mrss-hdr-left-content" style="empty-cells:show;table-layout:fixed;width:1px;border-right-width:2px;">
<colgroup>
<col etype="SELECTIONCOLUMN" style="width:21px;">
<col id="Status_Column" iidx="1" style="width:27px;">
<col id="Item_Column" iidx="2" style="width:34px;">
</colgroup>
<tbody irowindexoffset="0" irowsfragmentlength="1">
<tr rr="0" sst="4" rt="2" style="height:21px;">
<th id="grid#21.125#0,0" subct="HC" lsmatrixrowindex="0" lsmatrixcolindex="0" hasselmenu="X" acf="CSEL" hashovereffect="X" hoverhdrbg="X" hoverhdrbg_class="urST4LbHdrHvrBg" sst="2" class="urSTHC urBorderBox urST5HCMetricSelCol urST5L urST5HCColorLvl1 urST4LbHdrBg" style="height:20px;padding:0px;text-align:center;">
<div acf="SELMNUOPN" tabindex="0" ti="0" selmenuid="cnt20_SelectionMenu" id="grid#21.125#0,0-menu" class="urSTColHdrSelPopupIcon" title="Table selection menu">
</div>
</th>
<th id="grid#21.125#0,1" subct="HC" lsmatrixrowindex="0" lsmatrixcolindex="1" title="Status" captionid="grid#21.125#0,1#cp" acf="CSEL" resizable="X" headertype="S" hashovereffect="X" hoverhdrbg="X" hoverhdrbg_class="urST4LbHdrHvrBg" sst="2" class="urSTHC urBorderBox urST5HCMetricStd urST5L urST5HCMetricContent urST5HCColorLvl1 urST3HUnsel urST4LbHdrBg" style="height:20px;padding:1px;text-align:center;-ms-user-select:none;user-select:none">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="urST3HTblF" style="height:100%;">
<tbody>
<tr>
<td width="100%" class="urFontRel urST3Cl" style="white-space:nowrap;">
<div ctv="C" role="columnheader" align="center" tabindex="0" ti="0" title="Status" class="urST3Cl urCursorClickable" style="white-space:nowrap;">
<span id="grid#21.125#0,1-CONTENT" style="white-space:nowrap;">
<span id="grid#21.125#0,1#cp" ct="CP" title="Status">Status</span>
</span>
</div>
</td>
<td width="1" style="height:100%;">
<div id="grid#21.125#0,1-CRESIZE" acf="CRESIZE" class="urNoUserSelect" style="position:relative;height:100%;width:1px;padding:1px;padding-top:0px!important;padding-bottom:0px!important;padding-right:0px!important;">
<!--Column Resize for Status Column-->
<div class="urSTTHResize" style="height:100%;top:-1px;right:-3px;" onmousedown="mouseDownResize('Status_Column','Status_Content_Column','grid#21.125#0,1-CRESIZE','grid#21.125#0,2-CRESIZE',event);" onmousemove="mouseMoveResize('Status_Column', 'Status_Content_Column', event);" onmouseup="mouseUpResize('grid#21.125#0,1-CRESIZE','grid#21.125#0,1-CRESIZE');"> </div>
</div>
</td>
</tr>
</tbody>
</table>
</th>
<th id="grid#21.125#0,2" subct="HC" lsmatrixrowindex="0" lsmatrixcolindex="2" title="Item of Requisition" captionid="grid#21.125#0,2#cp" acf="CSEL" resizable="X" headertype="S" hashovereffect="X" hoverhdrbg="X" hoverhdrbg_class="urST4LbHdrHvrBg" sst="2" class="urSTHC urBorderBox urST5HCMetricStd urST5L urST5HCMetricContent urST5HCColorLvl1 urST3HUnsel urST4LbHdrBg" style="height:20px;padding:1px;text-align:right;-ms-user-select:none;user-select:none">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="urST3HTblF" style="height:100%;">
<tbody>
<tr>
<td width="100%" class="urFontRel urST3Cl" style="white-space:nowrap;">
<div ctv="C" role="columnheader" align="right" tabindex="0" ti="0" title="Item of Requisition" class=" urST3Cl urCursorClickable" style="white-space:nowrap;">
<span id="grid#21.125#0,2-CONTENT" style="white-space:nowrap;">
<span id="grid#21.125#0,2#cp" ct="CP" title="Item of Requisition">Item</span>
</span>
</div>
</td>
<td width="1" style="height:100%;">
<div id="grid#21.125#0,2-CRESIZE" acf="CRESIZE" class="urNoUserSelect" style="position:relative;height:100%;width:1px;padding:1px;padding-top:0px!important;padding-bottom:0px!important;padding-right:0px!important;">
<div class="urSTTHResize" style="height:100%;top:-1px;right:-3px;"> </div>

Array "sometimes" not defined

I am trying to implement a button that will delete events from a users selected set of events. For troubleshooting sakes right now I have 5 events hard coded in the page, but eventually they are called from localStorage. The delete button is supposed to delete elements from localStorage as well as the page. My problem is it throws an error when the Remove buttons are not clicked in order. Any and all help is appreciated. To see the errors please open console. Here's a fiddle: http://jsfiddle.net/roob/65j6ktnL/
here's a shorter version of the code:
<div id="result">
<div class="10am target-stage stage-only saturday eventer" id="row0" rel="0">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">10:30 a.m.</td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span><br /><span class="ev-signings">Signing Area 1</span></p></span>
<span class="info-body"><b>Anna Dewdney, </b>Author of<em> NELLY GNU AND DADDY TOO</em></span>
<span class="info-btn"><p class="selctor" rel="0"><span class="addSchd"><b>+ MY SCHEDULE</b></span>
<span class="mapit" ><b>map</b></span>
<span class="premove hidden" rel="0">Remove</span></p></span></td>
</tr>
</table>
</div>
<div class="11am target-stage stage-only saturday eventer" id="row1" rel="1">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">11:00 a.m. </td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span></p></span>
<span class="info-body"><b>Yuyi Morales, </b>Author of<em> NIÑO WRESTLES THE WORLD</em></span>
<span class="info-btn"><p class="selctor" rel="1"> <span class="addSchd"><b>+ MY SCHEDULE</b></span>
<span class="mapit" > <b>map</b></span>
<span class="premove hidden" rel="1">Remove</span></p></span></td>
</tr>
</table>
</div>
<div class="11am target-stage stage-only saturday eventer" id="row2" rel="2">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">11:30 a.m. </td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children’s Stage</b></span><br /><span class="ev-signings">Signing Area 4</span></p></span>
<span class="info-body"><em>Scooby-Doo and the Carnival Creep,</em> presented by <b>Warner Bros. Consumer Products</b></span>
<span class="info-btn"><p class="selctor" rel="2"> <span class="addSchd"><b>+ MY SCHEDULE</b></span>
<span class="mapit"><b>map</b></span>
<span class="premove hidden" rel="2">Remove</span></p></span></td>
</tr>
</table>
</div></div>
<script>
$(document).ready(function(){
var storaged = Object.keys(localStorage);
var storageLength = storaged.length;
for (var i=0; i<storageLength; i++)
{
var el = $(localStorage[storaged[i]]);
$("#result").append(el);
}
$("#buttn2").click(function(){
localStorage.clear();
$("#result").html('');
console.log("Storage is cleared");
});
$(".premove").click(function (event) {
event.preventDefault();
var a=$(this).attr("rel");
console.log(a);
var eventsArray = document.getElementsByClassName("eventer");
var eventSelctd=(eventsArray[a]).outerHTML;
localStorage.removeItem("schedule " + a, eventSelctd);
eventsArray[a].outerHTML="";
});
});
</script>

You are adding rel=(number) to each item in the list and using that number to get its reference in the array defined by document.getElementsByClassName("eventer") - each time you remove an item the array gets shorter because the removed item is now gone and you redefine it with each click of the remove button. What happens is you eventually start looking for item #4 and it isn't there because only two items exist in the list.
Another way to do this would be to look for the element closest to your button and remove it.
var eventSelected = $(this).closest('.eventer');
localStorage.removeItem("schedule " + a, eventSelected[0]);
eventSelected.remove();

incrementing the value of a input field in the cloned row

1)here i'm doing clone of a row...but this code is working only in eclipse [ ie ,cloning is working ] and it is also not working in any browsers.
2)What is the solution to get the values of text boxes in the cloned rows having same name, and insert into the database using jsp and servlet?
how can i get those values with same name
3)i have servlet code to get only single value from jsp
String address_seq_num =request.getParameter("address_seq_num");
how can i get the value of address seq number in the cloned row fromjsp to servlet to insert into the next row of a table in the database.
4)if i mention "DOCUMENT TYPE" to this code ,it will not work in eclipse also.....
please guide me...
JavaScript
function clonetable() {
var x=document.getElementById("main_table"); //get the table
var rowCount = x.rows.length;
var row = document.getElementById("table_row_clone"); // find row to copy
var table = document.getElementById("table_body"); // find table to append to
var clone = row.cloneNode(true); // copy children too
var tb1 = clone.document.getElementById("asn");//here i'm incrementing the value
tb1.value=rowCount+1;//of "address seq num " in the cloned row
clone.id = "abc"; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
}
function deltable() {
var x = document.getElementById("main_table"); //get the table
var rowCount = x.rows.length;
if (rowCount > 1) {
x.deleteRow(rowCount - 1);
} //delete the last row
}
HTML
<table id="main_table" align="center" style="width:75%">
<tbody id="table_body">
<tr id="table_row_clone">
<td>
<table align="center" style="width:100%">
<tr>
<td align="center">
<div style="border:3px solid silver;border-radius:5px;background-color:grey">
<table width="100%">
<tr>
<th align="center">Address Details</th>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div style="border:3px solid silver;border-radius:5px;background-color:#1E90FF">
<table align="center" style="width:99%">
<tr style="background-color:#1E90FF">
<td style="width:35%">
<table width="100%">
<tr id="slrow">
<td style="width:43%">Address Seq Num</td>
<td>
<input id="asn" style="width:60px" name="address_seq_num" type="text" value="1" readonly>
</td>
</tr>
</table>
</td>
<td width="49%" align="right">
<input style="width:80%" type="text" value="Reg.office/Primary Office">
</td>
<td align="right">
<input style="width:30px" type="button" value="+" onclick="clonetable()">
<input style="width:30px" type="button" value="-" onclick="deltable()">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>

Per your HTML (which is messy, by the way) you can increment that textbox's value with something like:
var tb = document.getElementById("asn");
tb.value = parseInt(tb.value, 10) + 1;
The trick is you have to cast the textbox's value into a number, which is what parseInt is doing in that example.
Note that the above snippet will give you "NaN" in the textbox if the value is not a valid number - it's not doing any data validation at all.

HTML table rows not counted in IE, Work well in Chrome/FF , for Pagination using JS

Web application using jQuery, I want to add pagination. It works well on Firefox & Chrome. But on IE 8 it can't calculate the number of rows.
this.init = function () {
var rows = document.getElementById(tableName).rows;
var records = (rows.length);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}
rows returning 0 in IE 8 but all other browser giving correct row count.
I am appending the html table to DIV
Following is the html created of my table
<TABLE style="PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px" class="pad white" border=0 cellSpacing=1 cellPadding=1 width="100%">
<TBODY>
<TR>
<TD bgColor=#0f4d79 width="10%">
<DIV align=center><STRONG>#</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="10%">
<DIV align=center><STRONG>Date</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="20%">
<DIV align=center><STRONG>Customer</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="30%">
<DIV align=center><STRONG>Description</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="10%">
<DIV align=center><STRONG>Status</STRONG></DIV></TD>
<TD bgColor=#0f4d79 width="20%">
<DIV align=center><STRONG>Amount</STRONG></DIV></TD></TR></TBODY></TABLE>
<DIV class=border-middle>
<TABLE id=**tblIncomeListData** class=pad border=0 cellSpacing=0 cellPadding=0 width="100%">
<TR class=even jQuery172016229059503345766="72">
<TD style="DISPLAY: none" vAlign=top width=0% align=middle>30</TD>
<TD vAlign=top width="10%" align=middle>00001</TD>
<TD vAlign=top width="10%" align=middle>May 28, 2013</TD>
<TD vAlign=top width="20%" align=middle>test1</TD>
<TD vAlign=top width="30%" align=middle>Other Income </TD>
<TD vAlign=top width="10%" align=middle>Paid</TD>
<TD style="TEXT-ALIGN: right" vAlign=top width="20%">OMR444.00</TD></TR></TABLE></DIV>

That's odd, I thought IE8 supported the rows property. (Edit: It does: http://jsbin.com/ocufuf/1 Still, I'll leave this in place for now...)
Unless you have a table nested within that table (and it doesn't look like you do), you can replace it with getElementsByTagName:
var rows = document.getElementById(tableName).getElementsByTagName('tr');
Or of course, with jQuery (since you say you're using it, although it's not apparent from your code samples):
var rows = $("#" + tableName + " tr");
Note that if you do that, you'll have to change your table name, as **tblIncomeListData** is a valid id for HTML, but not for CSS.
If you were doing nested tables, you could still get the count easily with jQuery:
var rows = $("#" + tableName).children('thead, tbody, tfoot').children('tr');

document.getElementById(table).getElementsByTagName("tr").length

Since you are using Jquery, use the following code for getting the number of rows.
var rows = $('#tableId tr').length;
Also note that after getElementById, you have used tableName variable.
Don't know if you are storing the id of the table in that variable but ideally the ID of the table element has to be passed if you are using getElementById or #tableId.
Hope this would help.