How to append <div> content in jQuery - javascript

How to append below code in jQuery to display dynamically.
<div id="lol">
<tr data-userid="<%=iterator3.next()%>" data-mid="<%=iterator3.next()%>" >
<td width="119">Practise Match</td>
<%-- <td width="119"><%=iterator3.next()%><td>
<td width="119"><%=iterator3.next()%> <td> --%>
<td width="119"><%=iterator3.next()%>pts<td>
<td width="119"><%=iterator3.next()%>rank<td>
</tr>
</div>
$("#lol").append("<tr data-userid="+<%=iterator3.next()%>+" data-mid="+<%=iterator3.next()%>+" >"+ "<td >"+"Practise Match"+"</td>"+"<td >"+<%=iterator3.next()%>+"pts"+"<td>"+" <td width="119">"+<%=iterator3.next()%>+"rank"+"<td>"+"</tr>");
Is this correct or not?

Change the code to
<div id="lol">
<tr data-userid="<%=iterator3.next()%>" data-mid="<%=iterator3.next()%>" >
<td width="119">Practise Match</td>
<%-- <td width="119"><%=iterator3.next()%><td>
<td width="119"><%=iterator3.next()%> <td> --%>
<td width="119"><%=iterator3.next()%>pts<td>
<td width="119"><%=iterator3.next()%>rank<td>
</tr>
</div>
$("#lol").append(`<tr data-userid="${<%=iterator3.next()%>}" data-mid="${<%=iterator3.next()%>}">
<td>Practise Match</td>
<td>${<%=iterator3.next()%>}pts</td>
<td width="119">${<%=iterator3.next()%>}rank</td>
</tr>`);
I changed the code to ES6 standard, that will give a HTML structure look.
You are missing td closing tag.
Hope this will help you.

Related

Hiding a <td> depending on the Condition

I have a table structure as given below:
<table>
<tr>
<td id="td1"> </td>
<td id="td2"> </td>
<td id="td3"> </td>
<td id="td4"> </td>
</tr>
</table>
I am checking some condition like:
if(a==2 || check == true)
I want to hide the "td3" if any one condition satisfies.
My code is in C#.
I have already tried
document.getelementbyId("td3").style("display"= "none"),
document.getelementbyId("td3").display.hide();
td3.Attributes.add("style", "display:none")
Your three JavaScript examples aren't valid JavaScript. I recommend reading the JavaScript docs a bit more in depth!
You can use the code below to hide the td.
document.getElementById("td3").style.display = "none";
<table>
<tr>
<td id="td1">TD1</td>
<td id="td2">TD2</td>
<td id="td3">TD3</td>
<td id="td4">TD4</td>
</tr>
</table>
You can simply use jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#td3').hide()
});
</script>
</head>
<body>
<table>
<tr>
<td id="td1">TD1</td>
<td id="td2">TD2</td>
<td id="td3">TD3</td>
<td id="td4">TD4</td>
</tr>
</table>
</body>
</html>

Loop through table and extract specifics cells

I am having difficulty using jQuery to loop though a table, then extract specifics cells.
I know this can be done with .each, I don't have a code to share as example but I am trying as we speak, I am just looking for some suggestions. I will share any code I can come up with.
What would be the best way to achieve this?
Code Snippet:
<table id="tablemain" class="tableclass">
<thead>
<tr>
<th>A</th>
<th>Site1</th>
<th>Site2</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th style="width: 10%;">L</th>
<th>M</th>
</tr>
</thead>
<tbody>
<tr id="row0" class="parent">
<td class="radioTableDetails awarded-td-background-color">Name1</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row0" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 09:30</td>
<td class="odd-td-TableDetails">06/06/2017 16:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row0" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9">-</td>
<td> </td>
</tr>
<tr id="row1" class="parent">
<td class="radioTableDetails">Name2</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row1" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:30</td>
<td class="odd-td-TableDetails">06/06/2017 17:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row1" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 11:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9"> -</td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
The result I want in array or variable:
Name1
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival
===============
Name2
1.Site 1 Arrival
2.Site 1 Departure
3.Site 2 Arrival
I know it sounds simple enough, but I am new to JavaScript so any examples/demos would be appreciated.
Note: There are no fixed values, Names keep changing and more rows are added.
You can select each row with class parent and then get the following two rows using jQuery's next() function. From the docs:
Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.
Also each HTML element should have a unique id. In your code you used the id row0 for 3 different elements which is just bad practice. If such cases are needed you should uses classes instead of ids.
The below snippet creates an array containing objects that hold the requested information. The extraction of these information depends on the order of the columns (specifically, I used the :nth-child() selector to get the desired cell). If the order of the columns will change over time, please consider adding descriptive classes to each cell and select based on these classes.
var entries = [];
$("#tablemain tr.parent").each(function(){
var child1 = $(this).next();
var child2 = child1.next();
var cells = {
name: $(this).find("td:nth-child(1)").text(),
arrival1: child1.find("td:nth-child(2)").text(),
departure: child2.find("td:nth-child(2)").text(),
arrival2: child1.find("td:nth-child(3)").text()
};
entries.push(cells);
});
console.log(entries);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tablemain" class="tableclass">
<thead>
<tr>
<th>A</th>
<th>Site1</th>
<th>Site2</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
<th>K</th>
<th style="width: 10%;">L</th>
<th>M</th>
</tr>
</thead>
<tbody>
<tr id="row0" class="parent">
<td class="radioTableDetails awarded-td-background-color">Name1</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row01" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 09:30</td>
<td class="odd-td-TableDetails">06/06/2017 16:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row02" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9">-</td>
<td> </td>
</tr>
<tr id="row1" class="parent">
<td class="radioTableDetails">Name2</td>
<td colspan="11"> </td>
<td class="version-Link-Table even-td-TableDetails"> </td>
</tr>
<tr id="row11" class="child">
<td class="child-row-Table-Details"><strong>Arrival</strong></td>
<td class="even-td-TableDetails">06/06/2017 10:30</td>
<td class="odd-td-TableDetails">06/06/2017 17:00</td>
<td class="even-td-TableDetails">A</td>
<td class="odd-td-TableDetails">B</td>
<td class="even-td-TableDetails">D</td>
<td class="odd-td-TableDetails">E</td>
<td class="even-td-TableDetails"> </td>
<td class="odd-td-TableDetails">F</td>
<td class="even-td-TableDetails">G</td>
<td class="odd-td-TableDetails">H</td>
<td class="even-td-TableDetails diff-td-text-color">I</td>
<td class="modify-Link-Table-Disabled odd-td-TableDetails">J</td>
</tr>
<tr id="row12" class="child">
<td class="child-row-Table-Details"><strong>Departure</strong></td>
<td class="even-td-TableDetails">06/06/2017 11:00</td>
<td class="odd-td-TableDetails">-</td>
<td class="even-td-TableDetails" colspan="9"> -</td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>

Comma separated list from checkbox values

I've been digging around to try and get a list of comma separated values from a set of checkboxes. There have been lots of useful answers here, but I can't work out a final kink. My code is behaving oddly depending on whether or not the first checkbox is checked and I can't work out why (this is my first ever attempt at javascript!)
<script type="text/javascript">
function updateTextArea() {
var allVals = $('input.gift:checked').map(
function() {return this.value;}).get().join();
$('#txtValue').val(allVals)
}
$(function () {
$('#gift input').click(updateTextArea);
updateTextArea();
});
</script>
And here's the html that accompanies it.
<fieldset id="gift">
<input type='checkbox' name='lFreeProductid' value='8840'
id="lFreeProductid1" class="gift">
</td>
<td class="style42">64 SSG</td>
<td class="style32"> </td>
</tr>
<tr id="tr2">
<td class="style33"><input type='checkbox' name='lFreeProductid'
value='420' id="lFreeProductid1" class="gift"></td>
<td class="style41">Perfect D</td>
<td> </td>
</tr>
<tr id="tr3">
<td class="style33"><input type='checkbox' name='lFreeProductid'
value='460' id="lFreeProductid1" class="gift"></td>
<td class="style41">Soccer Attack</td>
<td> </td>
</tr>
</fieldset>
<tr>
<td class="style33"> </td>
<td class="style41"> </td>
<td> </td>
</tr>
</table>
<textarea id="txtValue"></textarea>
I know this is the sort of question that's been asked a thousand times, but I can't seem to find a solution to this specific issue. Any help would be greatly appreciated.
I think your code is working fine !
Check this demo once : https://jsbin.com/vigixi/46/edit?html,js,output
And if this is not the desired output you want. Then let us know what exactly you want.
I advice you to correct all the HTML syntax errors
<fieldset id="gift">
<table>
<tr id="tr1">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='8840' id="lFreeProductid1" class="gift"></td>
<td class="style42"><label for="lFreeProductid1">64 SSG</label></td>
<td class="style32"> </td>
</tr>
<tr id="tr2">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='420' id="lFreeProductid2" class="gift"></td>
<td class="style41"><label for="lFreeProductid2">Perfect D</label></td>
<td> </td>
</tr>
<tr id="tr3">
<td class="style33"><input type='checkbox' name='lFreeProductid' value='460' id="lFreeProductid3" class="gift"></td>
<td class="style41"><label for="lFreeProductid3">Soccer Attack</label></td>
<td> </td>
</tr>
<tr>
<td class="style33"> </td>
<td class="style41"> </td>
<td> </td>
</tr>
</table>
</fieldset>
<textarea id="txtValue"></textarea>
Your issue could be due to a certain browser or/and doctype

Put dates into a calendar using Javascript and HTML Table

So I (again) am starting web design and decided to try my luck with a very complex website for my father's business. He teaches baseball, and so I'm trying to make a calendar. I finally got it looking exactly how I like using HTML Tables, so now I want to put dates into the calendar but don't want to delete the table since it took so long to perfect.
So the ways I was thinking about doing this was giving a value to all the cells with the first sunday being set to 1 and so on and so forth until I hit 42, but don't know if you could give values to anything other than form fields/objects. I tried using divs and it just got too confusing and impossible for me at my current skill level to get the divs to fall in line how I wanted them to. I plan on having the calendar display openings based off of the admin view of the calendar. I just can't logic my way through it, so how would you guys do it. I want the day values to appear in the proper position, that I can do on my own. I just need the initial month code and then I can go from there.
Here's the JSFiddle link:
http://jsfiddle.net/rccrf/m9kny41m/
HTML
<!DOCTYPE html>
<body>
<div id="JMBody">
<div id="masterBody">
<div id="fixed">
<!--Heading Table-->
<header id="Title">
<table id="tTable">
<tr id="topRow">
<td id="leftCell"><image id="ball" src="ball.png" /></td>
<td id="JMB" class="middleCell"><span id="JMBaseball">John Martin Baseball</span><br /><span id="home">Schedule</span></td>
<td id="rightCell" rowspan="3"><image id="john" src="John4.png"></td>
</tr>
<tr id="bottomRow">
<td id="bBat" colspan="2"><img id="bat" src="bat2.png" /></td>
</tr>
</table>
</header>
<!--Navigation Bar-->
<nav id="navBar">
<table id="navi">
<tr id="links">
<td id="link3">Home</td>
<td id="link1">Professional<br />History</td>
<td id="link2">Philosophy</td>
<td id="link5">Schedule<br />Lessons</td>
<td id="link6">Driving<br />Directions</td>
<td id="link7">Contact Me</td>
</tr>
</table>
</nav>
</div>
<!--Main Body of the site-->
<div id="mBody">
<!----------------------------------------------------------------->
<!----------------Month View 1------------------------------------->
<!----------------------------------------------------------------->
<div class="monthBG" id="monthBG1">
<table class="monthViewMain1" id="monthView1">
<tr><!--Month Name Row-->
<td class="monthName" id="monthName1" colspan=7>November</td>
</tr>
<tr><!--Days of the Week Row-->
<td class="dotw1" id="sun"><b>Sunday</b></td>
<td class="dotw1" id="mon"><b>Monday</b></td>
<td class="dotw1" id="tue"><b>Tuesday</b></td>
<td class="dotw1" id="wed"><b>Wednesday</b></td>
<td class="dotw1" id="thu"><b>Thursday</b></td>
<td class="dotw1" id="fri"><b>Friday</b></td>
<td class="dotw1" id="sat"><b>Saturday</b></td>
</tr>
<tr class="weekRow" id="firstWeek1">
<td class="firstWeekDayCellStart" id="sun1-1" placeholder="1"></td>
<td class="firstWeekDayCell" id="mon2-1" placeholder="2"></td>
<td class="firstWeekDayCell" id="tue3-1" placeholder="3"></td>
<td class="firstWeekDayCell" id="wed4-1" placeholder="4"></td>
<td class="firstWeekDayCell" id="thu5-1" placeholder="5"></td>
<td class="firstWeekDayCell" id="fri6-1" placeholder="6"></td>
<td class="firstWeekDayCellEnd" id="sat7-1" placeholder="7"></td>
</tr>
<tr class="weekRow" id="secondWeek1">
<td class="weekDayCellStart" id="sun8-1" placeholder="1"></td>
<td class="weekDayCell" id="mon9-1" placeholder="2"></td>
<td class="weekDayCell" id="tue10-1" placeholder="3"></td>
<td class="weekDayCell" id="wed11-1" placeholder="4"></td>
<td class="weekDayCell" id="thu12-1" placeholder="5"></td>
<td class="weekDayCell" id="fri13-1" placeholder="6"></td>
<td class="weekDayCellEnd" id="sat14-1" placeholder="7"></td>
</tr>
<tr class="weekRow" id="thirdWeek1">
<td class="weekDayCellStart" id="sun15-1" placeholder="1"></td>
<td class="weekDayCell" id="mon16-1" placeholder="2"></td>
<td class="weekDayCell" id="tue17-1" placeholder="3"></td>
<td class="weekDayCell" id="wed18-1" placeholder="4"></td>
<td class="weekDayCell" id="thu19-1" placeholder="5"></td>
<td class="weekDayCell" id="fri20-1" placeholder="6"></td>
<td class="weekDayCellEnd" id="sat21-1" placeholder="7"></td>
</tr>
<tr class="weekRow" id="fourthWeek1">
<td class="weekDayCellStart" id="sun22-1" placeholder="1"></td>
<td class="weekDayCell" id="mon23-1" placeholder="2"></td>
<td class="weekDayCell" id="tue24-1" placeholder="3"></td>
<td class="weekDayCell" id="wed25-1" placeholder="4"></td>
<td class="weekDayCell" id="thu26-1" placeholder="5"></td>
<td class="weekDayCell" id="fri27-1" placeholder="6"></td>
<td class="weekDayCellEnd" id="sat28-1" placeholder="7"></td>
</tr>
<tr class="weekRow" id="fifthWeek1">
<td class="weekDayCellStart" id="sun29-1" placeholder="1"></td>
<td class="weekDayCell" id="mon30-1" placeholder="2"></td>
<td class="weekDayCell" id="tue31-1" placeholder="3"></td>
<td class="weekDayCell" id="wed32-1" placeholder="4"></td>
<td class="weekDayCell" id="thu33-1" placeholder="5"></td>
<td class="weekDayCell" id="fri34-1" placeholder="6"></td>
<td class="weekDayCellEnd" id="sat35-1" placeholder="7"></td>
</tr>
<tr class="weekRow" id="sixthWeek1">
<td class="weekDayCellLastSun" id="sun36-1" placeholder="1"></td>
<td class="lastWeekDayCell" id="mon37-1" placeholder="2"></td>
<td class="lastWeekDayCell" id="tue38-1" placeholder="3"></td>
<td class="lastWeekDayCell" id="wed39-1" placeholder="4"></td>
<td class="lastWeekDayCell" id="thu40-1" placeholder="5"></td>
<td class="lastWeekDayCell" id="fri41-1" placeholder="6"></td>
<td class="weekDayCellLastSat" id="sat42-1" placeholder="7"></td>
</tr>
</table>
</div>
</div>
</div>
<!-- Footer (also universal) -->
<footer id="legal">
<span id="Disclaimer">Disclaimer!!! </span><span> &copy <b>2014 RCCRF: Function</b> </span>
</footer>
</div>
</body>
</html>
This may be helpful as well. It includes a jQuery plugin and has many options http://javascript.daypilot.org/
There is a free light version that may just do the job: http://javascript.daypilot.org/lite/

How to back to a root HTML tag with jQuery or Javascript

I would like to use the td.ms-vb-title in order to get the text 2,004, 2,005, 2,006 in the class ms-vb2 attribute.
I tried to use prev() but it didn't work...
HTML:
<tbody>
<tr iid="92,1,0" class="ms-itmhover" setedgeborder="true">
<td class="ms-vb-itmcbx ms-vb-firstCell">
<input type="checkbox" class="s4-itm-cbx"></td>
<td class="ms-vb2"></td>
<td height="100%" class="ms-vb-title" onmouseover="OnChildItem(this)" id="msomenuid2"></td>
<td class="ms-vb2">
<div align="right">2,004</div>
</td>
<td class="ms-vb2">
<div align="right">1,000</div>
</td>
<td class="ms-vb2">
<div align="right">400</div>
</td>
<td class="ms-vb2 ms-vb-lastCell">
<div align="right">600</div>
</td>
</tr>
<tr iid="92,2,0" class="ms-alternating ms-itmhover" setedgeborder="true">
<td class="ms-vb-itmcbx ms-vb-firstCell">
<input type="checkbox" class="s4-itm-cbx"></td>
<td class="ms-vb2"></td>
<td height="100%" class="ms-vb-title" onmouseover="OnChildItem(this)"></td>
<td class="ms-vb2">
<div align="right">2,005</div>
</td>
<td class="ms-vb2">
<div align="right">1,170</div>
</td>
<td class="ms-vb2">
<div align="right">460</div>
</td>
<td class="ms-vb2 ms-vb-lastCell">
<div align="right">1,200</div>
</td>
</tr>
<tr iid="92,3,0" class="ms-itmhover" setedgeborder="true">
<td class="ms-vb-itmcbx ms-vb-firstCell">
<input type="checkbox" class="s4-itm-cbx"></td>
<td class="ms-vb2"></td>
<td height="100%" class="ms-vb-title" onmouseover="OnChildItem(this)"></td>
<td class="ms-vb2">
<div align="right">2,006</div>
</td>
<td class="ms-vb2">
<div align="right">660</div>
</td>
<td class="ms-vb2">
<div align="right">1,120</div>
</td>
<td class="ms-vb2 ms-vb-lastCell">
<div align="right">780</div>
</td>
</tr>
</tbody>
Javascript:
var arrayList = $("td.ms-vb-title:contains('')");
var a = $(arrayList).prev().eq(0).find("ms-vb2");
alert(arrayList.length);
alert(a.length);
$.each(arrayList, function (i, e) {
areaname[i] = $(e).text();
});
You should use .closest()
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
Change your code to
var a = $(arrayList).closest('tr').find(".ms-vb2");

Categories