Link to home
Start Free TrialLog in
Avatar of Jason Maxwell
Jason Maxwell

asked on

Table Appear ontop of Existing Table

How do I have a table appear directly ontop of another table in browser after the user has clicked the submit button so only the resulting table is shown? I need to move the existing table from below only to appear after the submit button where the first table is situated.

EDIT: Am looking for solution where the resulting table appears after submit button. It cannot appear as a dialog/pop-up but only directly on the page. The resulting table is located in the same place where the first table is. Only resulting table must show.  

index.html
app.js
Avatar of leakim971
leakim971
Flag of Guadeloupe image

test page : https://jsfiddle.net/jv0f9kcq/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Activity 1:Table</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="app.js" type="text/javascript"></script>
</head>
<body>
<!--table 1-->
<table id="tableOne" border="1">
    <tr>
        <th>
            Full Name:
        </th>
        <td>
            <input type="text" name="FullName" id="fname">
        </td>
    </tr>
    <th>
        Member ID:
    </th>
    <td>
        <input type="text" name="MemberID" id="mid1">
    </td>
    <tr>
        <th>
            Gender:
        </th>
        <td>
            <input type="radio" name="Male" id="m1" value="Male">
            <label for="m1">Male</label>
            <input type="radio" name="Male" id="f1" value="Female">
            <label for="f1">Female</label>
        </td>
    </tr>
    <tr>
        <th>
            Height:
        </th>
        <td>
            <input type="text" name="Height" id="h1">
        </td>
    </tr>
    <th>
        Weight:
    </th>
    <td>
        <input type="text" name="Weight" id="w1">
    </td>
</table>
<!--processes acceptInput()-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter" id="push" onclick="acceptInput()">
    Report it!
</button>

<br>
<br>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!--table 2-->
                <table id="resultTable" border="1">
                    <tr>
                        <th>
                            Full Name:
                        </th>
                        <td>
                            <input type="text" name="FullName2" id="fname2" readonly>
                        </td>
                    </tr>
                    <th>
                        Member ID:
                    </th>
                    <td>
                        <input type="text" name="MemberID2" id="mid2">
                    </td>
                    <tr>
                        <th>
                            Gender:
                        </th>
                        <td>
                            <input type="text" name="Male2" id="m2"value="" readonly>
                            <input type="hidden" name="Male2" id="f2" value="1" readonly>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Height:
                        </th>
                        <td>
                            <input type="text" name="Height2" id="h2"readonly>
                        </td>
                    </tr>
                    <th>
                        Weight:
                    </th>
                    <td>
                        <input type="text" name="Weight2" id="w2" readonly>
                    </td>
                    <tr>
                        <th>
                            Ideal Weight:
                        </th>
                        <td>
                            <input type="text" name="IdealWeight" id="iw" readonly>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>

Open in new window

Avatar of Jason Maxwell
Jason Maxwell

ASKER

Hello,

Thank you for your contribution, but the table cannot be as an alert(type) dialogue. Only the resulting table must appear after the user has clicked the submit button where the first table was.
check this : https://jsfiddle.net/jv0f9kcq/2/

<div id="table1">
<!--table 1-->
<table id="tableOne" border="1">
    <tr>
        <th>
            Full Name:
        </th>
        <td>
            <input type="text" name="FullName" id="fname">
        </td>
    </tr>
    <th>
        Member ID:
    </th>
    <td>
        <input type="text" name="MemberID" id="mid1">
    </td>
    <tr>
        <th>
            Gender:
        </th>
        <td>
            <input type="radio" name="Male" id="m1" value="Male">
            <label for="m1">Male</label>
            <input type="radio" name="Male" id="f1" value="Female">
            <label for="f1">Female</label>
        </td>
    </tr>
    <tr>
        <th>
            Height:
        </th>
        <td>
            <input type="text" name="Height" id="h1">
        </td>
    </tr>
    <th>
        Weight:
    </th>
    <td>
        <input type="text" name="Weight" id="w1">
    </td>
</table>
<!--processes acceptInput()-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter" id="push" onclick="acceptInput()">
    Report it!
</button>
</div>
<br>
<br>
<div id="table2" class="hide" >
                <!--table 2-->
                <table id="resultTable" border="1">
                    <tr>
                        <th>
                            Full Name:
                        </th>
                        <td>
                            <input type="text" name="FullName2" id="fname2" readonly>
                        </td>
                    </tr>
                    <th>
                        Member ID:
                    </th>
                    <td>
                        <input type="text" name="MemberID2" id="mid2">
                    </td>
                    <tr>
                        <th>
                            Gender:
                        </th>
                        <td>
                            <input type="text" name="Male2" id="m2"value="" readonly>
                            <input type="hidden" name="Male2" id="f2" value="1" readonly>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Height:
                        </th>
                        <td>
                            <input type="text" name="Height2" id="h2"readonly>
                        </td>
                    </tr>
                    <th>
                        Weight:
                    </th>
                    <td>
                        <input type="text" name="Weight2" id="w2" readonly>
                    </td>
                    <tr>
                        <th>
                            Ideal Weight:
                        </th>
                        <td>
                            <input type="text" name="IdealWeight" id="iw" readonly>
                        </td>
                    </tr>
                </table>
</div>

Open in new window



var bm1=false;
var bf1=true;
var oneh=100;
var fullname;
var mid;
var height;
var sum2;
var sum1;
var weight;
var iweight;
//Sum1 and Sum2 Arithmetic based on gender
function calculateResult(height)
{
    sum1=(height-oneh)- (height-oneh) * 0.1;
    sum2=(height-oneh) - (height-oneh)* 0.15;

    if (getGender()){
        return  sum2;
    }
    else{
        return sum1 ;
    }

}

function getGender(){
    return document.getElementById('f1').checked;
}
//Takes values from table above to table below. 
function acceptInput()
{
    fullname=document.getElementById('fname').value;
    mid=document.getElementById('mid1').value;
    bm1=document.getElementById('m1').boolValue;
    bf1=document.getElementById('f1').boolValue;
    height=parseInt(document.getElementById('h1').value);
    weight=parseInt(document.getElementById('w1').value);
        
    document.getElementById('fname2').value = fullname;
    document.getElementById('mid2').value = mid;
    setMaleFemale();
    document.getElementById('h2').value = height;
    document.getElementById('w2').value = weight;
    document.getElementById('iw').value = calculateResult(weight);
    
    document.getElementById("table1").className = "hide";
    document.getElementById("table2").className = "";
}

//Checks to for written radio table value. 
function setMaleFemale(gender){
    if(getGender()){
        document.getElementById('m2').value = "Female";
    }else {
        document.getElementById('m2').value = "Male";
    }
}

Open in new window


.hide {
  display:none;
}

Open in new window

Hello, thank you for your input!

The page now does reload with the second table showing only the result. I see that the original second-table is hidden using .hide element in CSS and set as a div.

What method was used to show the second table after the submit button? That would be the ideal method of loading the second table directly onto the page after submit is clicked more preferably than css hidden configuration.
1 - put your original table in a form
2 - be sure to use a name for every fields
3 - use the same name for button radio and checkboxes but different value
4 - the action parameter of the form (1) is the name of a second page where you put the second table
5 - not sure if you have PHP, JAVA or any other language on your server, so use GET parameter as method of your form
6 - retrieve the parameter using the GUP function (just google it if needed or use this one here)
7 - remove this acceptInput in your first page as you get value of fields using gup (7)

This link may help you understand what I mean : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
Hello,

Unfortunately The first table cannot be converted into a form-type text-field as it has to remain as a <table> type.
External languagesprograms/frameworks/plugins are also not available as only Javascript/html is being used.
Database/URL connections are also not available.
The first table cannot be converted into a form-type text-field as it has to remain as a <table>

Which point let you understand you need to change it in my previous comment?
Hello,

A form is usually information to be filled such as this using the <form> tags below:

User generated image
While usually a <table> is inserted into a <form> the original question must remain as a <table> type as requested. Table that intakes field data, and a table that shows as result on same page. This is preferred using document.write so that the table is shown immediately. The issue is simply transferring the existing second table to reload upon submit.  

If there is anyone available that can fullfill the requested above with vanilla javascript/html, the question is opened. Unfortunately there unavailability to use any external frameworks/plugins/networks/Urls/languages for this request.
greetings Jason Maxwell, , I may not understand what you are trying to do ? ? ?
leakim971 has given you some examples that seem to do what you want ? ?
But I can not really tell?
You say in your comment -
   "The issue is simply transferring the existing second table to reload upon submit.  "

But I do not know what you mean by  "reload upon submit"

But I did some javascriot to read the input values on a table and then CREATE a <table> with javascript. and place some rows and cells in it,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Activity 1:Table</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <scriptd src="app.js" type="text/javascript"></scriptd>
    
<script>
function acceptInput() {
var tbl1 = document.getElementById('tableOne');
var rows = tbl1.rows, table = document.createElement('table'), ih = 1;
table.border = 1;
table.width = 250;

for (var i=0; i < rows.length; ++i) {
  var tr = document.createElement('tr');
  var clone = rows[i].cells[0].cloneNode(true);
  tr.appendChild(clone);
  var td = document.createElement('td');
  if (i == 3) { ih = rows[i].cells[1].getElementsByTagName("input")[0].value ? rows[i].cells[1].getElementsByTagName("input")[0].value : '1';
  ih = parseInt(ih);
  }
  if (i != 2) {
    td.appendChild(document.createTextNode(rows[i].cells[1].getElementsByTagName("input")[0].value));
    } else {
    if (rows[i].cells[1].getElementsByTagName("input")[0].checked) {
      td.appendChild(document.createTextNode("M"));
      ih = (ih-100)- (ih-100) * 0.1;
      } else
      td.appendChild(document.createTextNode("F"));
      ih = (ih-100)- (ih-100) * 0.15;
    }
  tr.appendChild(td);
  table.appendChild(tr);
  }
  
tr = document.createElement('tr');
var clone = rows[0].cells[0].cloneNode(true);
clone.innerHTML = "Ideal Weight";
tr.appendChild(clone);
var td = document.createElement('td');
td.appendChild(document.createTextNode(""+ih));
tr.appendChild(td);
table.appendChild(tr);
document.getElementById('showTable2').appendChild(table);;
}
</script>
<style>
#container {
position: relative;
}

#showTable2 {
position: absolute;
top: 1px;
left: 0px;
background: white;
}

#showTable2 table td{
padding: 2px;
}
</style>
</head>
<body>
<div id="container">
<!--table 1-->
<table id="tableOne" border="1">
    <tr>
    <th>
    Full Name:
    </th>
    <td>
        <input type="text" name="FullName" id="fname">
    </td>
    </tr>
    <th>
    Member ID:
    </th>
    <td>
        <input type="text" name="MemberID" id="mid1">
    </td>
    <tr>
    <th>
    Gender:
    </th>
    <td>
        <input type="radio" name="Male" id="m1" value="Male">
        <label for="m1">Male</label>
        <input type="radio" name="Male" id="f1" value="Female">
        <label for="f1">Female</label>
    </td>
    </tr>
    <tr>
    <th>
    Height:
    </th>
    <td>
        <input type="text" name="Height" id="h1">
    </td>
    </tr>
    <th>
    Weight:
    </th>
    <td>
        <input type="text" name="Weight" id="w1">
    </td>
</table>

<div id="showTable2"></div>
</div>
<!--processes acceptInput()-->
<button id="push" onclick="acceptInput()">Report it!</button>


<br>
<br>
the end
</body>
</html>

Open in new window


It looks like it works? ? to me anyway.
Hello, thank you for your contribution.

By transferring and reloading the previous table is moving the Element tags from Table 2 to be written directly into the HTML document by using javascript.

Have found solution to answer as this here
document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");

Open in new window

. The last two above solutions also work but without <HTML> tags.
@Jason Maxwell

OK, I read your comment but I do not understand what needs to be done.
Sorry but I did not understand, or get your meaning when you said -
      "By transferring and reloading the previous table is moving the Element tags from Table 2 to be written directly into the HTML document by using javascript."

also you show an example of javascript that uses the  document.write( )  method and in your comments you say -  "This is preferred using document.write so that the table is shown immediately"

My view is, the  document.write( )  method is rarely used in modern web pages, and it is not a way to place content into the shown web page with a button Click that runs a function like  acceptInput( ), , I mostly use TWO ways to place content on the existing web page, One way if to create the elements in JS and then push those elements into an element on the page, so If I wanted the page content of this JS -
document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");

Open in new window

to do this from a function I might write code to  create elements -
function newContent1( ) {
    var newEl = document.createElement("H1");
    var newText = document.createTextNode("Hello World!");
    newEl.appendChild(newText);
    document.getElementById('div1').appendChild(newEl);

    var newEl = document.createElement("p");
    var newText = document.createTextNode("Have a nice day!");
    newEl.appendChild(newText);
    document.getElementById('div1').appendChild(newEl);
}

Open in new window

OR I might us JS to place a string into an element as the New HTML for that Element
function newContent2( ) {
    document.getElementById('div1').innerHTML = "<h1>Hello World!</h1><p>Have a nice day!</p>";
}

Open in new window

so you could get an Input Value, and then use .innerHTML to add a table to the content-
function showVerifacation( ) {

var NAME = document.getElementById('name').value;

var newHTML = "<form action='newSub.jsp'><h3>Verify Submission</h3>"+
  "<table><tbody><tr><td>name</td><td><input type='text' name='Name' value='"+ NAME +"'></td></tr>"+
  "<tr><td><input type='submit' value='Correct - Submit'></td><td><button onclick='cancel()'>Cancel</button></td></tr>"+
  "</tbody></table></form>";

    document.getElementById('div1').innerHTML = newHTML;
}

Open in new window

This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.