CODEWITHSUNDEEP
javascriptjqueryhtml-table
David Hollenbeck
David Hollenbeck

Reputation: 13

Jquery and Tables

I have an HTML form that I am pulling data from and and using jQuery to gather the form data and put it below. However, when I click the button the function works, but I can't get it to go down in the table with each entry in a separate row. It just stacks until the line is full then goes to the next line. I want to be able to edit this so that it lines up under each other. Here is my code: 

<html>
<head>
    <title>jQuery</title>       
     <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript"             src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">             
            $(document).ready(function(){
             $('#button').click(function(){
            var row1 = document.getElementById("1stname").value;
            var row2 = document.getElementById("2ndname").value;
            var row3 = document.getElementById("3rdname").value;
            var row4 = document.getElementById("4thname").value;
            $('#row1 ').append(row1, row2, row3, row4) ;                
            });
        });
    </script>
</head>
<body >
<div id='wrapper'>
<div id="col">
        <table id='tabletop'>
          <tr>
            <th id='first'>First Name</th>
            <th id='last'>Last Name</th> 
            <th id='email'>Email Address</th>
            <th id='contact'>Contact #</th>
          </tr>
          </table>
          </div>
        <p id="row1"></p>           
 </div>

 <div id=formdiv>
  <form id='form1' >
  First name:<br>
  <input id='1stname' type="text" name="firstname" value="First Name">
  <br>
  Last name:<br>
  <input id='2ndname' type="text" name="lastname" value="Last Name">
  <br>
  Email Address:<br>
  <input id='3rdname' type="text" name="emailaddress" value="Email Address">
  <br>
  Contact No:<br>
  <input id='4thname' type="text" name="contactno" value="Phone #">
  <br><br>

</form> 
    <input id="button" type="submit" value="Add User">
</div>

</div>
</body>
</html>

/*CSS reset settings here*/
*{
 margin: 0px;
 padding: 0px;
}

#wrapper{
    width: 490px;
    border: 1px solid black;
}
#col{

    border: 1px solid green;
    display: inline-block;
}

#col2{
    border: 1px solid black;
    display: inline-block;
}

#tabletop{
    border: 1px solid red;
    width: 490px;
    display: block;
}

#formdiv{
    display: inline-block;
}

Upvotes: 0

Views: 40

Answers (2)

Sᴀᴍ Onᴇᴌᴀ
Sᴀᴍ Onᴇᴌᴀ

Reputation: 8297

Use insertRow() and insertCell() to add a row and cells to the table.

The code below also uses Array.prototype.forEach() to iterate over the ids of the elements and add a cell for each one to the row being added. 

$(document).ready(function() {
  var table = $('#tabletop');
  $('#button').click(function() {
    var row = tabletop.insertRow();
    ['1stname', '2ndname', '3rdname', '4thname'].forEach(function(elementId) {
      var cell = row.insertCell();
      cell.innerHTML = document.getElementById(elementId).value;
    });
  });
});
* {
  margin: 0px;
  padding: 0px;
}

#wrapper {
  width: 490px;
  border: 1px solid black;
}

#col {
  border: 1px solid green;
  display: inline-block;
}

#col2 {
  border: 1px solid black;
  display: inline-block;
}

#tabletop {
  border: 1px solid red;
  width: 490px;
  display: block;
}

#table_id td {
  display: inline-block;
}

#formdiv {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
  <div id="col">
    <table id='tabletop'>
      <tr>
        <th id='first'>First Name</th>
        <th id='last'>Last Name</th>
        <th id='email'>Email Address</th>
        <th id='contact'>Contact #</th>
      </tr>
    </table>
  </div>
  <p id="row1"></p>
</div>

<div id=formdiv>
  <form id='form1'>
    First name:<br>
    <input id='1stname' type="text" name="firstname" value="First Name">
    <br> Last name:<br>
    <input id='2ndname' type="text" name="lastname" value="Last Name">
    <br> Email Address:<br>
    <input id='3rdname' type="text" name="emailaddress" value="Email Address">
    <br> Contact No:<br>
    <input id='4thname' type="text" name="contactno" value="Phone #">
    <br><br>
  </form>
  <input id="button" type="submit" value="Add User">
</div>

Upvotes: 1

JC Hern&#225;ndez
JC Hern&#225;ndez

Reputation: 807

Try to add an element that can be used inside a "p" with a CSS class that pile the elements one after another, like this:

<script type="text/javascript">
            $(document).ready(function(){
             $('#button').click(function(){
            var row1 = $('<div class="clsBlk"/>').text(document.getElementById("1stname").value);
            var row2 = $('<div class="clsBlk"/>').text(document.getElementById("2ndname").value);
            var row3 = $('<div class="clsBlk"/>').text(document.getElementById("3rdname").value);
            var row4 = $('<div class="clsBlk"/>').text(document.getElementById("4thname").value);
            $('#row1 ').append(row1, row2, row3, row4) ;
            });
            });
    </script>
<style type="text/css">
 .clsBlk { display:block; }
</style>

Upvotes: 0

Related Questions