0

I have JSON data that is displayed in an HTML table. I have separate input fields like the same keys in the object(firstname, lastname, email, phone number) and an "Add Row" Button.

I need to enter values in the input fields and then when I click the "Add Row" button the Input field should be appended to the table.

I can display the data in the table but I am not able to append the new data to the table. I also need to validate the fields. Can anyone help to solve this?

 var obj=[{Firstname:"Bob",Lastname:"Mayer",Email:"[email protected]",Number: "123456789"},         {Firstname:"Steven",Lastname:"Spil",Email:"[email protected]",Number: "987654321"},         {Firstname:"Paul",Lastname:"Taucker",Email:"[email protected]",Number: "578954321"}];

var form = document.createElement('form');
document.body.appendChild(form);

var table = document.createElement("table");
table.setAttribute("id", "myTable");
form.appendChild(table);

var row = document.createElement("tr");
table.appendChild(row);
Object.keys(obj[0]).forEach(function(val) {
  var cell = document.createElement("th");
  row.appendChild(cell);
  cell.innerHTML = "Sl.No";
  cell.innerHTML = val;
  cell.style.border = '1px solid #ccc';
});

for (var i = 0; i < obj.length; i++) {
  var row = document.createElement("tr");
  table.appendChild(row);
  for (key in obj[i]) {
    var cell = document.createElement("td");
    row.appendChild(cell);
    cell.innerHTML = obj[i][key];
    cell.style.border = '1px solid #ccc';
  }
}

var addForm = document.createElement('div');
form.appendChild(addForm);

var checkbox = document.createElement('input');
checkbox.type = "checkbox";

var input = document.createElement('input');
input.type = "text";
input.id = "firstName";
input.placeholder = "Firstname";
addForm.appendChild(input);

var input1 = document.createElement('input');
input1.type = "text";
input.id = "lastName";
input1.placeholder = "Lastname";
addForm.appendChild(input1);

var input2 = document.createElement('input');
input2.type = "email";
input.id = "emailId";
input2.placeholder = "Email";
addForm.appendChild(input2);

var input3 = document.createElement('input');
input3.type = "number";
input.id = "phNum";
input3.placeholder = "Number";
addForm.appendChild(input3);

var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";

var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";

var btnClick = document.createElement('input');
btnClick.type = "button";
btnClick.value = "Add Row";
btnClick.onclick = addTable;
form.appendChild(btnClick);

var addTable = function() { 
  var fn = document.getElementById("firstName").value;
  var ln = document.getElementById("lastName").value;
  var mail = document.getElementById("emailId").value;
  var num = document.getElementById("phNum").value;
};

JsFiddle

Improve this question

3 Answers 3

Reset to default
1

Can you check fiddle(https://jsfiddle.net/mco8wzev/9/) once.Below is the code

var obj=[{Firstname:"Bob",Lastname:"Mayer",Email:"[email protected]",Number: "123456789"},
     {Firstname:"Steven",Lastname:"Spil",Email:"[email protected]",Number: "987654321"},
     {Firstname:"Paul",Lastname:"Taucker",Email:"[email protected]",Number: "578954321"}];

var form = document.createElement('form');
document.body.appendChild(form);

var table = document.createElement("table");
table.setAttribute("id", "myTable");
form.appendChild(table);

var row = document.createElement("tr");
table.appendChild(row);
Object.keys(obj[0]).forEach(function(val) {
var cell = document.createElement("th");
row.appendChild(cell);
cell.innerHTML = "Sl.No";
cell.innerHTML = val;
cell.style.border = '1px solid #ccc';
});

for (var i = 0; i < obj.length; i++) {
var row = document.createElement("tr");
table.appendChild(row);
for (key in obj[i]) {
var cell = document.createElement("td");
row.appendChild(cell);
cell.innerHTML = obj[i][key];
cell.style.border = '1px solid #ccc';
}
}

var addForm = document.createElement('div');
form.appendChild(addForm);

var checkbox = document.createElement('input');
checkbox.type = "checkbox";

var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";
input.class = "Firstname";
addForm.appendChild(input);

var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";
input1.class = "Lastname";
addForm.appendChild(input1);

var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";
input2.class = "Email";
addForm.appendChild(input2);

var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";
input3.class = "Number";
addForm.appendChild(input3);

var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";

var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";

var addTable = function() { 
var row = document.createElement("tr");
table.appendChild(row);
var cell = document.createElement("td");
row.appendChild(cell);
cell.innerHTML = input.value;
cell.style.border = '1px solid #ccc';
var cell = document.createElement("td");
row.appendChild(cell);
cell.innerHTML = input1.value;
cell.style.border = '1px solid #ccc';
var cell = document.createElement("td");
row.appendChild(cell);
cell.innerHTML = input2.value;
cell.style.border = '1px solid #ccc';
var cell = document.createElement("td");
row.appendChild(cell);
cell.innerHTML = input3.value;
cell.style.border = '1px solid #ccc';
};
var btnClick = document.createElement('input');
btnClick.type = "button";
btnClick.value = "Add Row";
btnClick.onclick = addTable;
form.appendChild(btnClick);

Hope it may help you...Still addTable function need to be optimized..I'l update once its done..Mean while you can try too..

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Sure Getty.. Thanks Let Me try :)
Yes, we can reset it.Updated the fiddle with reset feature.
Thanks Getty.. (Y)
While i click the Add Row Button the empty row is appending.. it's possible to prevent adding the empty row..
Do you need to check for only one field or for all ?
|
1

You just need to define var addTable = function() { } before use it here btnClick.onclick = addTable;

you used btnClick.onclick = addTable; and here addTable is undefined, so before use it you have to define.

Improve this answer

Comments

1

that should work

var obj=[{Firstname:"Bob",Lastname:"Mayer",Email:"[email protected]",Number: "123456789"},         {Firstname:"Steven",Lastname:"Spil",Email:"[email protected]",Number: "987654321"},         {Firstname:"Paul",Lastname:"Taucker",Email:"[email protected]",Number: "578954321"}];
    function addRow(obj){
      var table = document.getElementById('myTable');
      var row = document.createElement("tr");
      table.appendChild(row);
      for (key in obj) {
        var cell = document.createElement("td");
        row.appendChild(cell);
        cell.innerHTML = obj[key];
        cell.style.border = '1px solid #ccc';
      }
    }
    var addTable = function() { 
      var fn = document.getElementById("firstName").value;
      var ln = document.getElementById("lastName").value;
      var mail = document.getElementById("emailId").value;
      var num = document.getElementById("phNum").value;
      addRow({Firstname:fn,Lastname:ln,Email:mail,Number:num});
      return false;
    };
    var form = document.createElement('form');
    document.body.appendChild(form);
    form.onsubmit = addTable
    
    var table = document.createElement("table");
    table.setAttribute("id", "myTable");
    form.appendChild(table);
    
    var row = document.createElement("tr");
    table.appendChild(row);
    Object.keys(obj[0]).forEach(function(val) {
      var cell = document.createElement("th");
      row.appendChild(cell);
      cell.innerHTML = "Sl.No";
      cell.innerHTML = val;
      cell.style.border = '1px solid #ccc';
    });
    
    for (var i = 0; i < obj.length; i++) {
      addRow(obj[i])
    }
    
    var addForm = document.createElement('div');
    form.appendChild(addForm);
    
    var checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    
    var input = document.createElement('input');
    input.type = "text";
    input.id = "firstName";
    input.required = true
    input.placeholder = "Firstname";
    addForm.appendChild(input);
    
    var input1 = document.createElement('input');
    input1.type = "text";
    input1.required = true
    input1.id = "lastName";
    input1.placeholder = "Lastname";
    addForm.appendChild(input1);
    
    var input2 = document.createElement('input');
    input2.type = "email";
    input2.id = "emailId";
    input2.required = true
    input2.placeholder = "Email";
    addForm.appendChild(input2);
    
    var input3 = document.createElement('input');
    input3.type = "number";
    input3.required = true
    input3.id = "phNum";
    input3.placeholder = "Number";
    addForm.appendChild(input3);
    
    var btnSave = document.createElement('button');
    btnSave.innerHTML = "Save";
    
    var btnEdit = document.createElement('button');
    btnEdit.innerHTML = "Edit";
    
    var btnClick = document.createElement('input');
    btnClick.type = "submit";
    btnClick.value = "Add Row";
    btnClick.onclick = addTable;
    form.appendChild(btnClick);
* {
  font-famil: 'verdana';
}
table {
  margin-bottom: 15px;
}
input {
  margin: 5px
}
th, td {
  padding: 5px;
  font: 13px 'verdana';
}
th {
  font-weight: bold
}

Improve this answer

2 Comments

Thanks Let me check (Y)
check it now its been fixed

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.