I am tryin to build some HTML dynamically.The HTML as a div , within which there is a table and within one of the columns of the table , there is another table.
At present ,I am using .append method of jquery,which does not seem to be working. I am getting "unable to get property of childnodes of undefined".The application only makes use of IE. Could I be pointed in the right direction. What am I doing wrong here?
$("<div style='background-color: #757575 border: 1px solid gray; ").append("MainDiv");
$("<table style='width: 100%; height: 100%'>").append("MainDiv");
$("<tr>" + "<td>" +
"<table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
"<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
"<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
"</tr>" +
"</table></td></tr></table></div>").append("MainDiv");
You could use append() like :
var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});
var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
"<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
"<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
"</tr>" +
"</table></td></tr>");
container_div.append(table);
$("#MainDiv").append(container_div);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>
Hope this helps.
NOTE : I suggest to create a class for the shared style between all tds so the code will be more readable :
var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});
var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
"<tr>" +
"<td style='width:70px;' class='col' nowrap>ID</td>" +
"<td style='width:100px' class='col'>Name</td>" +
"<td style='width: 90px;text-align:left;' class='col'>Status</td>" +
"</tr>" +
"</table></td></tr>");
container_div.append(table);
$("#MainDiv").append(container_div);
.col{
background-color: #999999;
font-weight: bold;
color: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>
You are close but not quite there.
$('MainDiv').append('some html here')
The .append method works in such a way that you have a selector:
$('MainDiv')
This selects some DOM element that you have available to work with, you then call the .append method on it:
$('Some Selector').append('Some HTML');
this inserts the html denoted by append() as the last child element of the selector $('Some Selector'), more on this can be found here.
You might also want to consider putting all the HTML you want to add into an array of strings that you can then loop through and append each of them to some element. This isn't the best way to achieve your goal but is a good way to understand jQuery and some of it's DOM manipulation methods.
Related
I have successfully created dynamic table using JavaScript. Now I want to add a column which will be blank and editable to the user after header 6 column in the table with default header name.
I have to no clue how to do.
var passedArray = [
["header_1", "header_2", "header_3", "header_4", "header_5", "header_6"],
["dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg"],
["fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg"],
["sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs"],
["dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd"]
];
var html = "<table id = both_table>";
passedArray[0].forEach(function(key) {
let newVal = key.replace(/_/g, ' ').toUpperCase();
html += "<th>" + newVal + "</th>";
});
passedArray = passedArray.slice(1, );
passedArray.forEach(function(row) {
html += "<tr>";
Object.keys(row).forEach(function(key) {
html += "<td>" + row[key] + "</td>";
});
html += "</tr>";
});
html += "</table>";
normalizedDataTable.innerHTML = html;
#both_table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
margin-bottom: 3rem;
text-align-last: center;
}
#both_table td,
#both_tableth {
border: 1px solid #ddd;
padding: 8px;
}
#both_table tr:hover {
background-color: #ddd;
}
#both_table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4caf50;
color: white;
}
<div class="normalized_data_table" id="normalizedDataTable"></div>
Thank you in advance
You should wrap your table in a <form> and then add an <input type="text"/> in each row:
var passedArray = [
["header_1", "header_2", "header_3", "header_4", "header_5", "header_6"],
["dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg"],
["fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg"],
["sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs"],
["dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd"]
];
// wrap the table in a form
var html = "<form action='test.html'>"
html += "<table id = both_table>";
passedArray[0].forEach(function(key) {
let newVal = key.replace(/_/g, ' ').toUpperCase();
html += "<th>" + newVal + "</th>";
});
// add an header for your last column
html += "<th>Edit</th>"
passedArray = passedArray.slice(1, );
passedArray.forEach(function(row) {
html += "<tr>";
Object.keys(row).forEach(function(key) {
html += "<td>" + row[key] + "</td>";
});
// create an input field in each row
html += "<td><input type='text'/></td>"
html += "</tr>";
});
html += "</table>";
// create the submit button
html += "<button type='submit'>Submit form</button>";
// close the form
html += "</form>";
normalizedDataTable.innerHTML = html;
#both_table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
margin-bottom: 3rem;
text-align-last: center;
}
#both_table td,
#both_tableth {
border: 1px solid #ddd;
padding: 8px;
}
#both_table tr:hover {
background-color: #ddd;
}
#both_table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4caf50;
color: white;
}
<div class="normalized_data_table" id="normalizedDataTable"></div>
See also on JSFiddle.
I have an existing Classic ASP site that I am converting to C#/ASP.NET. In this legacy site, they use the following code to display HTML data (as opposed to plain text) as a tooltip. The existing code formats some tables using HTML and then uses a depreciated method to make them a tooltip. Example:
function EnterContent(layerName, TTitle, TContent, RecordNum) {
ContentInfo = '<table border="1" style="width: 200px; border-top-color: #808080; border-right-color: #808080; border-bottom-color: #808080; border-left-color: #808080; padding:0; border-spacing:0 ">' +
'<tr><td style="width: 100%; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000">' +
'<table border="0" style="width: 100%;padding: 0; border-spacing: 0; background-color: #C0C0C0">' +
'<tr><td style="width: 100%; border-top-color: ' + topColor + '; border-right-color: ' + topColor + '; border-bottom-color: ' + topColor + '; border-left-color: ' + topColor + '">' +
'<table style="width: 100%;padding :0;border-spacing: 0;text-align: center" >' +
'<tr><td style="width: 100%; background-color: #0000FF">' +
'<div class="tooltiptitle">' + TTitle + '</div>' +
'</td></tr>' +
'</table>' +
'</td></tr>' +
'<tr><td style="width: 100%; border-top-color: ' + subColor + '; border-right-color: ' + subColor + '; border-bottom-color: ' + subColor + '; border-left-color: ' + subColor + '">' +
'<table {padding:5} style="width: 100%;border-spacing: 0;text-align: center">' +
'<tr><td >' +
'<font class="tooltipcontent">' + TContent + '</font>' +
'</td></tr>' +
'</table>' +
'</td></tr>' +
'</table>' +
'</td></tr>' +
'</table>';
ReplaceContent(ContentInfo, RecordNum)
}
And here is the way they did it in the legacy code:
function ReplaceContent(layerName){
if(ie){document.all[layerName].innerHTML = ContentInfo}
if(ns){
with(document.layers[layerName].document) {
open();
write(ContentInfo);
close();
}
}
}
Notice it uses Document Layers to populate the tooltip. This is depreciated and will not work with modern browsers. Here is what I came up with:
function ReplaceContent(ContentInfo, RecordNum) {
var HTMLElement = document.getElementById(RecordNum)
// alert(ContentInfo)
HTMLElement.title = ContentInfo
}
This kind of works. It shows a tooltip, but the info in the tool tip is the plain text of the HTML formatted tables. I am not sure that you can even populate HTML successfully into the tooltip (i've seen posts say you can and can't).
In my version, RecordNum is the control ID (in this case, its a TD in the first line). Example here:
<b>1.</td><td width="100%" ID= \"" + aActions[i,0] + "\" runat=\"server\ "><span onMouseover="EnterContent('ToolTip','New Assignment','<b>Action Taken by:</b>
<br>SOMEONES NAME<br>on Monday, October 28, 2019<br>at 9:11:50 AM EST<fieldset style=padding:2>
<legend><b>Comment</b>
</legend> SOMEONES NAME has been assigned as Person initiating the Help Call (Caller).</fieldset>'); Activate();"'
onmouseout="deActivate()">
This is the 2nd part that opens the links page (it is working correctly):
<font class="ActionName"><b>New Assignment</span> </font><br></font>
<span id="actionspan2" style="display=none;"><font class="ActionData"> SOMEONES NAME <br>on Monday, October 28, 2019<br>
at 9:11:50 AM EST<br></span>
</font></td></tr><tr><td width="19" valign="top"><center><font class="ActionData">
Here is how the tooltip is suppose to appear
So, my problem is that I can get the proper text to the tooltip, but it doesn't display in an HTML format. I have tested the HTML code to make sure it was not the problem. I pasted it into the .aspx page and verified it displays correctly. I am not a Javascript expert by any means, so apologies in advance if I have follow up questions.
This code allows you to have html in a tooltip. Please change the css styling as needed:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 220px;
background-color: #ffffff;
text-align: center;
border-radius: 6px;
border: 1px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltip .tooltiptext TH {
background-color: blue;
color: #fff;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">
Hover over me
<span class="tooltiptext">
<table>
<tr>
<th>
SOMEONES NAME <br>on Monday, October 28, 2019
at 9:11:50 AM EST<br>
</th>
</tr>
<tr>
<td valign="top">
More data here
</td>
</tr>
</table>
</span>
</div>
</body>
</html>
A couple ideas:
Perhaps you could create the tooltip information when you create the links (instead of on the fly).
You can also use an ajax call to get the information when you hover over it as well.
The code found here is a good way to use tooltips with CSS:
https://www.w3schools.com/howto/howto_css_tooltip.asp
It looks like you are changing the title. The original code changes the innerHTML. You can still assign the innerHTML of the div using this syntax:
document.getElementById(RecordNum).innerHTML = "whatever";
I am also a big fan of jQuery which has many of the UI features built in:
https://jqueryui.com/tooltip/
The user can save some pictures from a list that will be stored in a div containing the thumbnails of the saved pictures. I dynamically resize the containing div to be big enough to contain all the thumbnails. As long as I use an img tag to contain the thumbnails everything works fine, as in the following screenshot:
The code I use to build the div:
currentPictures.innerHTML += "<img class='preview' id='spic" + picId + "' " +
"onclick='showImageOnCanvas(\"" + sourceImg + "\", " + picId + ")' " +
"oncontextmenu='removeSavedPicture(\"spic" + picId + "\");' " +
"src='" + sourceImg + "'> ";
css for .preview:
.preview {
cursor: pointer;
width: 80px;
height: 54px;
border: black 2px solid;
}
This is the css of the containing div (some of this values are changed programmatically according to the number of thumbnails saved):
#currentPictures {
margin: auto;
position: absolute;
top: 38px;
left: 300px;
width: 300px;
height: 320px;
z-index: 16;
background-color: #DDDDDD;
border: 1px solid #999999;
padding: 16px 16px 16px 16px;
border-radius: 6px;
font-family: arial;
text-align: center;
vertical-align: middle;
font-size: 12px;
display: none;
overflow-y: none;
overflow-x: scroll;
-ms-user-select: none;
}
Now I want to put the img in a div, in order to add some text to the picture. The problem is that as soon as I wrap the img in a div, the divs are stacked and not put next to each other, as in this screenshot:
The code:
currentPictures.innerHTML += "<div><img class='preview' id='spic" + picId + "' " +
"onclick='showImageOnCanvas(\"" + sourceImg + "\", " + picId + ")' " +
"oncontextmenu='event.preventDefault(); removeSavedPicture(\"spic" + picId + "\");' " +
"src='" + sourceImg + "'></div> ";
I tried to use different display styles on the div but with no success.
I'm pretty sure I'm missing something obvious. Thanks!
I'm echoing a table from mySql. The TD border is not showing up no matter how I input the code. The thead border is showing up just fine.
This is what I have.
// Loop to show results
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td style=text-align:center>".$row['ETF'].
"</td>";
echo "<td style=text-align:center>".$row['ETF NAME'].
"</td>";
echo "<td style=text-align:center>".$row['1 YR Direction %'].
"</td>";
echo "<td style=text-align:center>".$row['Holding Name'].
"</td>";
echo "<td style=text-align:center>".$row['Industry'].
"</td>";
echo "<td style=text-align:center>".$row['Percent Holdings'].
"</td>";
"</tr>";
}
echo "</table>";
<style type="text/css">thead,
th {
font-weight: bold;
background-color: #992c29;
color: #f7f4f4;
border: 2px solid black;
tr,
td {
border: 2px solid black;
}
</style>
You have not closed your th selector, so the styles directly below it are considering invalid syntax, and will never execute.
Closing your th selector by adding in the missing curly brace (}) will resolve your issue:
th {
font-weight: bold;
background-color: #992c29;
color: #f7f4f4;
border: 2px solid black;
}
tr,
td {
border: 2px solid black;
}
In addition to this, ensure that no other selectors are overriding your styles with higher specificity.
Hope this helps! :)
Close off missing
thead,
th {
font-weight: bold;
background-color: #992c29;
color: #f7f4f4;
border: 2px solid black;
}
tr,
td {
border: 2px solid black;
}
I have a function that renders an object in html.
.item {
padding: 10px;
margin: 20px;
display: inline-block;
position: relative;
border: 1px solid #666;
background: #ddd;
}
.item h4 {
font-size: 18px;
text-align: center;
}
.item h5 {
font-size: 14px;
text-align: center;
}
.item img {
width: 200px;
height: 200px;
}
I seem to be missing a formatting issue. The JS compiles properly, no errors, but both the h4 tag and the h5 tag render outside the , even though in code the closing div tag is after the h4 and h5 tags.
Here ids the HTML after it gets rendered in the browser
<div class="menuHolder" id="menuContainer">
for (var i = 0; i < foodItems.length; i++) {
document.getElementById("menuContainer").innerHTML += '<div class="item"> <img src="' + foodItems[i].image + '" >';
document.getElementById("menuContainer").innerHTML += '<h4> ' + foodItems[i].name + '</h4>';
document.getElementById("menuContainer").innerHTML += '<h5> $' + foodItems[i].price + '</h5>';
document.getElementById("menuContainer").innerHTML += '</div>';
console.log("Item: " + foodItems[i].name + " Cost: $" + foodItems[i].price);
}
.item {
padding: 10px;
margin: 20px;
display: inline-block;
position: relative;
border: 1px solid #666;
background: #ddd;
}
.item h4 {
font-size: 18px;
text-align: center;
}
.item h5 {
font-size: 14px;
text-align: center;
}
.item img {
width: 200px;
height: 200px;
}
<div class="menuHolder" id="menuContainer">
<div class="item">
<img src="images/hamburger.jpg"></div>
<h4>Hamburger</h4>
<h5>$2.99</h5><div class="item">
<img src="images/fries.jpg"></div>
<h4>Fries</h4>
<h5>$1.99</h5>
<div class="item">
<img src="images/donuts.jpg">
</div>
<h4>Donuts</h4>
<h5>$0.99</h5>
</div>
Try this:
for (var i = 0; i < foodItems.length; i++) {
var tmpstr = '<div class="item"> <img src="' + foodItems[i].image + '" >';
tmpstr += '<h4> ' + foodItems[i].name + '</h4>';
tmpstr += '<h5> $' + foodItems[i].price + '</h5>';
tmpstr += '</div>';
document.getElementById("menuContainer").innerHTML = tmpstr;
console.log("Item: " + foodItems[i].name + " Cost: $" + foodItems[i].price);
}
When you added string to innerHTML, browsers may "auto correct" the html and added at the end.
P.S. you may need to take care of escaping characters in your foodItems[i].name.