Fill table cells with text using form

JavaScript
1

Hello!
Please, I would be gratefull if someone helped me with some hints how to fill table cells using FORM. many thanks in advance!

2

I think first to find all cells using DOM?

3

Hi, I ment to do it using loop, but where to put the loop and why?
Many thanks!!!

<input type="text" id="myText" value="">
<input type="text" id="myText2" value="">
 
 
<button onclick="myFunction()">Try it</button>
 
<table>
 
 
  <tr>
      <td id="td11"></td><td id="td12"></td>
  </tr>
 
<tr>
      <td id="td21"></td><td id="td22"></td>
  </tr>
 
 
</table>
<script>
function myFunction() {
    var x = document.getElementById("myText").value;
    var y = document.getElementById("myText2").value;
   
    document.getElementById("td11").innerHTML = x;
    document.getElementById("td12").innerHTML = y;
 
    var x2 = document.getElementById("myText").value;
    var y2 = document.getElementById("myText2").value;
 
 
    document.getElementById("td21").innerHTML = x2;
    document.getElementById("td22").innerHTML = y2;
 
 
}
</script>
4

Hi,

I added your Pastebin code to your post, as it is easier to post it here.

Did I get you right that you have two text inputs and when you click the button, the values of the text inputs should be inserted into each table row?

E.g. if I enter “test” and “test1” respectively, the following markup will be generated:

<table>
  <tr>
    <td id="td11">test</td>
    <td id="td12">test1</td>
  </tr>
  <tr>
    <td id="td21">test</td>
    <td id="td22">test1</td>
  </tr>
</table>
5

Hello!
I have to fill the table using form values and no other way.

Have a look at this, I sure don’t have the loop on the right place but I jsut can’t concentrate enough to get it properly:

http://pastebin.com/KDdi0URD

Btw, PLEASE, how to get code in the post, I have bad pc so I am not sure what to do to get it

7

Yes when I fill the form first, the value should go to first row
when I fill the form second time and click button second time, second row should be filled…
PLEASE HELP!!!

Some general variables? I did try…?

8

Paste the code into the editor.
Highlight the code in the editor using your mouse.
Hit the </> button in the editor toolbar.

I’ll post the code in my reply (as it is better to have it in this thread).
You had some typos in there (which I corrected). I removed the JavaScript (as it wasn’t doing anything) and added jQuery for ease (while we figure out what you’e trying to do). If that’s a problem, we can remove it later.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insert values into table</title>
    <style>
      table{
        border-collapse: collapse;
        width:100%;
        margin-top: 10px;
      }

      table,tr, th, td{
        border: 3px solid black;
      }

      td{
        text-align:center;
        height:100px;
      }

      input, button{
        padding: 5px;
        margin-bottom: 5px;
      }
    </style>
  </head>

  <body>
    <input type="text" id="myText1" placeholder="Input 1" /><br>
    <input type="text" id="myText2" placeholder="Input 2" /><br>
    <button>Try it</button>

    <table>
      <tr>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
      </tr>
    </table>

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
    
    </script>
  </body>
</html>

Wouldn’t it be better to give each input its own button? That way, when button one is clicked, the values from input one can get inserted into the first column, when button two is clicked, the values from that can get inserted into column two.

9

Hello!

NO, the point of the task is that the button is the same and each ckick we input another field / row

10

Sorry, I’m still not clear what you’re asking.

We have a table, with two text inputs and a button. What should happen when:

  • The user enters something into input one, nothing into input two?
  • The user enters something into input two, nothing into input one?
  • The user enters something into input one, something into input one?
  • The user enters nothing into input one, nothing into input one?
11

Hello! I have a table and I have to input text into the cells using JUST ONE INPUIT BUTTON, so that each click fills the next cell with the text I put into the input square. (form)

Please, any HINTS what to do? At least right keywords? It is ment to be done using php! MANY THANKS!!!

Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insert values into table</title>
    <style>
      table{
        border-collapse: collapse;
        width:100%;
        margin-top: 10px;
      }

      table,tr, th, td{
        border: 3px solid black;
      }

      td{
        text-align:center;
        height:100px;
      }

      input, button{
        padding: 5px;
        margin-bottom: 5px;
      }
    </style>
  </head>

  <body>
    <input type="text" id="myText1" placeholder="Input 1" /><br>
    <input type="text" id="myText2" placeholder="Input 2" /><br>
    <button>Try it</button>

    <table>
      <tr>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
      </tr>
    </table>

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
    
    </script>
  </body>
</html>
12

If you’re reacting to the user doing something, you’re using Javascript, not PHP. The fact that your homework has loaded jQuery for you tells you that you should be looking for a jQuery method of modifying the table.

Hints?
.html()
:nth-child()

(Moderators: Flag for moving)

13

@mkjs - I’ve moved your post into your existing topic to avoid duplicating the discussion, which just causes confusion.

2 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.