html5 - How to add input field values ( text, date and dropdown ) into a new table or div using javascript? -

i implement in image:

1. it has 3 input fields - text , date picker , dropdown menu .
2. and there 2 buttons . on click of "add row "button ,input field values entered should added new table/div below .
3. and should able delete grid when select , click " clear button"

can give solution .

you can use following approach read data textbox , append data table :

i have shown example 1 textarea, same can done 2 or more .

  function addrow()    {      var name = document.getelementbyid('text1').value;      var newhtml = '<tr><td>name</td><td>'+name+'</td></tr>';      document.getelementbyid('table1').innerhtml+=newhtml;    }

name <input type="text" id="text1" /><br/>  <button onclick="addrow();">add row</button>  <hr/>  <table id="table1">  <tr><td>name</td><td>test</td></tr>  </table>

update: 3 fields

      function addrow()        {          var name = document.getelementbyid('text1').value;          var date = document.getelementbyid('date1').value;          var color = document.getelementbyid('color1').value;          var newhtml = '<tr><td>'+name+'</td><td>'+date+'</td><td>'+color+'</td></tr>';          document.getelementbyid('table1').innerhtml+=newhtml;        }

<form>    name <input type="text" id="text1" /><br/>      date <input type="date" id="date1" /><br/>      color <select id="color1">        <option value="yellow">yellow</option>        <option value="red">red</option>      </select>      <br/>      <br/>      <button type="reset">clear</button>      <br/>      <button onclick="addrow();">add row</button>      <hr/>      </form>      <table id="table1">      <tr><td>name</td><td>date</td><td>color</td></tr>      </table>