Need help aligning dynamic td element in html form - javascript

I have the following piece of code:
<tr>
<td style="display:none;" id="missing_person_report_label"><b>Enter image</b></td>
<td style="display:none;" id="missing_person_report_image"><input type="file"><br/></td>
</tr>
These td elements are initially set as hidden and are only displayed when I'm selecting the "Missing Person Report" option from the dropdown menu. The Javascript function to activate these td elements is given as:
function checkForChange(that) {
if (that.value == "missing_person_report") {
console.log(that.value);
console.log('person');
document.getElementById("missing_person_report_label").style.display = "block";
document.getElementById("missing_person_report_image").style.display = "block";
}
}
The code is doing as intended but there is a problem with the alignment of the tr element. This is the screenshot of the webpage.
I want the Choose file to have the same alignment as all the above elements,i.e. I want the Choose file to be on the right side of the Enter Image label . How do I do it?
Edit: Full Code is available here:
Edit: Those who are saying that I should assign the style to tr instead of td, I already tried doing this. If I do this, the webpage looks like this:
I want all the elements on the right to have the same alignment.

#Ronith.
Actially you their CSS as block, so that's why they are on separated lines. You should set display = "table-cell"
table {
width: 100%;
}
td {
display: table-cell;
}
<table>
<tr>
<td
id="missing_person_report_label"><b>Enter image</b></td>
<td
id="missing_person_report_image"><input type="file"></td>
</tr>
</table>
P.S.: do not pay attention that display is in CSS. It's just for instance. You should set it from JS code as you wish

display:block; makes a html element to take the full width of it's parent. So, you made tds to block level element they took all the width available and the upper one pushed the second one below.
Solution is not to change it's default display property. However try with inline-block or table-cell; which is the default property for tds inside a table.

The issue is because of display:block in javascript. set display: inline-block in your javascript code:
document.getElementById("missing_person_report_label").style.display = "inline-block";
document.getElementById("missing_person_report_image").style.display = "inline-block";

try this - apply display none to tr and not the td and from the function display block it again
<tr style="display:none;" id="missing_person_report_row">
<td><b>Enter image</b></td>
<td><input type="file"><br/></td>
</tr>
Function
function checkForChange(that) {
if (that.value == "missing_person_report") {
console.log(that.value);
console.log('person');
document.getElementById("missing_person_report_row").style.display = "block";
}
}

Related

HTML show/hide parts of a table onclick of table headers

I have a nested HTML table. I would like to show parts of the nested table depending on the header clicked using javascript
http://jsfiddle.net/TtWTR/103/
so far it shows all three parts. I want to click header A and show only optionA, click headerB and only show optionB etc etc. Not sure if ive set it up right as all three are showing. thanks
To achieve expected result, use below option oh hide() and show() methods
$('.trigger').click(function() {
console.log($(this).text())
var selectedHdr = $(this).text();
$('.nested tr').hide();
$('.nested tr#'+selectedHdr).show();
});
https://codepen.io/nagasai/pen/vdabJQ
Usually I find it convenient to use CSS class selectors on the "root" element (in your case that would be .toptable) allowing you to toggle it to show and hide child elements.
<table class="toptable">
<tr class="accordion">
<td class="A trigger">A</td>
<td class="B trigger">B</td>
<td class="C trigger">C</td>
</tr>
<tr>
<td>
<table>
<tr class="content A">
<!-- will toggle using show-A -->
</tr>
</table
</td>
</tr>
</table>
Then you can make sure to hide the .content rows using CSS unless specific classes are set on the top table:
.content {
display: none; /* content hidden by default */
}
.show-A .A.content {
display: table; /* show when the parent table has .show-A set */
}
Now you just have to add event listeners to your triggers to toggle the classes for the different content rows:
const toptable = document.querySelector('.toptable');
['A', 'B', 'C'].forEach((group) => {
const trigger = document.querySelector(`.${group}.trigger`);
trigger.addEventListener('click', () => {
toptable.classList.toggle(`show-${group}`);
});
});
This can be done using the following script
$('.nested').hide();
$('tr .trigger').click(function() {
var target_id= "#"+$(this).attr('id')+"-table";
$('.nested').not(target_id).hide();
$(target_id).show();
});
and is shown in http://jsfiddle.net/TtWTR/152/

Getting state of a variable to be printed out

I currently have a button that when I press it a table appears below it. My first question that I can't figure out is that I cannot get a border although I specified border="10". I am using firefox. Next I cannot figure out how to when I am done with my table to be able to press the button and have the table be hidden. My third question is that this table is being written as a test to see the state of my variables and parameters in my jsp are what I think they are. In my third cell of my table where I have just docs I want the the current value on the page of getDocs(). If I put it in the getDocs() then it gives me the result on page load which would be null. But in my showDiv() method when I run my debugger it shows the correct value of getDocs in the var docs = getDocs();. How do I get the docs value in docs.
window.onload = function()
{
document.getElementById("button").onclick = showDiv;
}
function showDiv()
{
document.getElementById("hidden").style.display = "block";
var docs = getDocs();
}
<input type="button" id="button" value="Click to show states" onclick="showDiv()"/>
<div id="hidden" style="display:none">
<table border="10" style="width:300px">
<tr>
<td>Type</td>
<td>Object</td>
<td>value</td>
</tr>
</br>
<tr>
<td>Element 1</td>
<td><%=docs%></td>
<td>docs</td>
</tr>
</table>
</div>
For the border issue, what happens if you put the border definition in the style declaration:
<table style="width:300px;border:1px solid black;">
For showing / hiding, a simple toggler can be put into the showDiv() call. Try:
function showDiv() {
if (document.getElementById('hidden').style.display == 'block') {
document.getElementById('hidden').style.display = 'none';
}
else {
document.getElementById('hidden').style.display = 'block';
}
}
Need more code examples and explanation to work on the Docs issue.
1) border is a css style attribute, so apply it in the css file.
#foo (yourid)
{
border: 10px;
}
2) you will have to create the button and create a onClick() function (JavaScript). This function will retrieve the table (possible by id) then change the display to none
var table = document.getElementById("foo);
table.style.display = none;
3) Not to sure about this one.
I'm not sure I will answer to each question here, but here you go anyway : http://jsfiddle.net/bbtVH/8/
You just need this javascript, since you use the HTML attribute onclick on your button, no need to add a listener in window.onload :
function showDiv() {
var table = document.getElementById("hidden");
if (table.style.display !== "block"){
table.style.display = "block";
// Just get docs from JSP, if you want to get its value :
// var docs = <%=docs%>;
}
else {
table.style.display = "none";
}
}
This CSS will give you borders of 2px around your cells :
td{
border: 2px solid black;
}
for your border :
<table border="10" style="width:300px border: 5px solid red; display:none">
to hide the table :
$("#hidden").fadeOut("slow");
or to see it :
$("#hidden").fadeIn("slow");
the get the values from docs:
docs.val()

jQuery dynamic insert row for expand/collapse

I have a table structure as follows;
<tr>
<td><div class="icon-chevron-right"></div></td>
<td><div>List 1</div></td>
</tr>
<tr>
<td><div class="icon-chevron-right"></div></td>
<td><div>List 2</div></td>
</tr>
Now on click of the icon image (chevron), I want the details row to be displayed immediately below the clicked row (It should be a tr containing child table). This should be inserted/appended dynamically on click of any of the list row.
How do I do this using jQuery? Any examples for reference would be really helpful..
the following example creates a new tr (if does not exists) containing table element under the tr where the clicked icon exists.
function createChildTable(string)
{
return $('<table>').append(
$('<tr>').append(
$('<td>').append(string)
)
);
}
$('.icon-chevron-right').click(function() {
var details = $(this).closest('tr').next('tr.details');
if (details.length) details.show();
else {
// first time clicked
details = $('<tr>').append( createChildTable('child table details') ).addClass('details');
$(this).closest('tr').after(details);
}
});
Example Link
I'd say there are two main ways to do this, and you'll have to figure out which one is best for you; it depends.
What you're talking about is ADDING a row into the DOM. This is fine in some cases, it depends on what this collapsed row is used for. If you want to be able to remove the collapsed row and add it again, it could make your life difficult if you have to reconstruct all the inner HTML via JavaScript every time.
var collapseHTML = '<tr class="collapse"><td colspan="2">This is my new row</td></tr>';
$('.icon-chevron-right').click(function() {
$('.collapse').remove(); // Deletes all rows that has class "collapse"
collapseHTML.insertAfter( $(this).closest('tr') ); // Inserts what's stored in collapseHTML after "this closest tr"
});
Then, as someone else said, you can solve this by adding those rows from the get go like so:
<tr>
<td><div class="icon-chevron-right"></div></td>
<td><div>List 1</div></td>
</tr>
<tr class="collapse">
<td colspan="2">This is my new row</td>
</tr>
Then, your css should loook something like this:
.collapse {
display: none;
}
.collapse.active {
display: block;
}
This means that when you add the active class to the collapse row, it goes from display: none; to display: block;. This you do via JavaScript/jQuery:
$('.icon-chevron-right').click(function() {
$('.collapse.active').removeClass('active'); // Removes active from all active collapsed rows
$(this).closest('tr').next().addClass('active'); // adds active class to "this closest tr's next element" (which is the collapse row)
});
Hope this helps!

javascript/html/css Show/hide box

I have done something like this before but this time code is not working. Basically, I want to let users toggle a box of html on and off. Here is a jsfiddle
http://jsfiddle.net/2pcwW/
There are several problems with this. First it isn't working as is possibly due to a typo. Second, I would like the default to be hide text, not show it, the opposite of what this tries to do. Finally, is it possible to place a table inside of the div so the whole table gets toggled on and off--in place of just "some text".
Here is non working code..same as in jsfiddle.
JS:
function toggleBox(obj) {
var box = document.getElementById("box");
if (box.style.display == "none") {
box.style.display = "";
obj.innerHTML = <div>Hide</div>;
} else {
box.style.display = "none";
obj.innerHTML = <div>Show</div>";
}
}
html:
<table><tr><td><div>
<div>Hide</div><div id="box">
Some text</div></div></td></tr></table>
Thanks for any suggestions.
Well, if you're okay not using JavaScript (and supporting only browsers that implement the :target pseudo-selector):
<table>
<tr>
<td>
<div>
<a href="#box">
<div>Hide</div>
</a>
<div id="box">
Some text. Hide</div>
</div>
</td>
</tr>
</table>
And CSS:
#box {
display: none;
}
#box:target {
display: block;
}​
JS Fiddle demo.

Hide table rows except head

Without Jquery or any JavaScript library i need to hide the rows of a simple html table except for the table head on page load.
if your table is correctly marked up.
You can do something like :
document.getElementById('yourtable')
.getElementsByTagName('tbody')[0]
.style.display = 'none';
Then put this on an 'onload' event
You could also do it in CSS + Javascript by setting a global .js class to your tag and then use CSS selector.
html.js #yourtable tbody
{
display: none;
}
<style type="text/css">
.mytable tr {
display: none;
}
</style>
Just kidding. Here we go:
<table border="1" id="mytable">
<th>
<td>asd</td>
<td>asd</td>
</th>
<tr>
<td>asdkjas</td>
<td>asdasdjwa</td>
</tr>
<tr>
<td>asdkjas</td>
<td>asdasdjwa</td>
</tr>
</table>
<script type="text/javascript">
window.onload=function(){
hideTableRows();
}
function hideTableRows() {
var myTableRows = document.getElementById("mytable").getElementsByTagName("tr");
for(i=0;i< myTableRows.length;i++) {
myTableRows[i].style.display = "none";
}
}
</script>
I think a table requires rows, won't display with just headers.. I could suggest adding a blank row at the start of the table, and changing "i" in the for loop to 1. That way the first row should be skipped.
HTH
Marko
No particular need to resort to javascript, you can do the trick through CSS too:
#table_id tr
{
display:none;
}
This should hide all TRs not TH.

Categories

Resources