Blog Archive

Dynamically generate HTML table using JavaScript - document.createElement() method

This tutorial covers the following topics
  • Create a Row dynamically inside the table from form data
  • Add a Delete button to the added table Row
  • Ability to delete the dynamically generated table Row

Generate HTML table dynamically using JavaScript
Generate HTML table dynamically using JavaScript
Generate HTML table dynamically using JavaScript
We have created a simple HTML form with name and age input. When the user clicks on the Add button we add a row to the Table element dynamically. You can also create a table right from scratch using createElement method.

Source for the HTML page - index.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML dynamic table using JavaScript</title>
    <script type="text/javascript" src="app.js"></script>
</head>
<body onload="load()">
<div id="myform">
<b>Simple form with name and age ...</b>
<table>
    <tr>
        <td>Name:</td>
        <td><input type="text" id="name"></td>
    </tr>
    <tr>
        <td>Age:</td>
        <td><input type="text" id="age">
        <input type="button" id="add" value="Add" onclick="Javascript:addRow()"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
</div>
<div id="mydata">
<b>Current data in the system ...</b>
<table id="myTableData"  border="1" cellpadding="2">
    <tr>
        <td>&nbsp;</td>
        <td><b>Name</b></td>
        <td><b>Age</b></td>
    </tr>
</table>
&nbsp;<br/>
</div>
<div id="myDynamicTable">
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
to create a Table and add some data using JavaScript
</div>
</body>
</html>

Source for the JavaScript file - app.js

function addRow() {
         
    var myName = document.getElementById("name");
    var age = document.getElementById("age");
    var table = document.getElementById("myTableData");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
    row.insertCell(1).innerHTML= myName.value;
    row.insertCell(2).innerHTML= age.value;

}

function deleteRow(obj) {
     
    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("myTableData");
    table.deleteRow(index);
   
}

function addTable() {
     
    var myTableDiv = document.getElementById("myDynamicTable");
     
    var table = document.createElement('TABLE');
    table.border='1';
   
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
     
    for (var i=0; i<3; i++){
       var tr = document.createElement('TR');
       tableBody.appendChild(tr);
      
       for (var j=0; j<4; j++){
           var td = document.createElement('TD');
           td.width='75';
           td.appendChild(document.createTextNode("Cell " + i + "," + j));
           tr.appendChild(td);
       }
    }
    myTableDiv.appendChild(table);
   
}

function load() {
   
    console.log("Page load finished");

}

53 comments :

  1. how to put into database?

    ReplyDelete
    Replies
    1. hello, Have u got ans for "How to put values n database?"

      Delete
  2. can you convert this to jquery?

    ReplyDelete
  3. This almost works for me. The row gets put into the table for an instant, but as soon as the page finishes reloading it goes away! Does anyone know why this is?

    ReplyDelete
  4. This sucks asshole

    ReplyDelete
  5. I want the "current data in the system" to be in a different page,can you please tell me how to do so?

    ReplyDelete
  6. Very nice. Love the concept. Very useful.

    ReplyDelete
  7. add button not working in mobile but it works in desktop browser

    ReplyDelete
  8. Wow! You're awesome! Thanks a lot man! ;))

    ReplyDelete
  9. how to insert these data into database(mysql) using jsp

    ReplyDelete
  10. nice but what if im going to use document.getElementByTagName("label") what would be the code?? please reply,

    ReplyDelete
  11. how to store data in msaccess using javascript

    ReplyDelete
  12. After refreshing the page everything data gone why?

    ReplyDelete
  13. how can i get the row count can anybody plz help me

    ReplyDelete
  14. Grateful to check out your website, I seem to be ahead to more excellent sites and I wish that you wrote more informative post for us. Well done work.

    ReplyDelete
  15. This sucks asshole

    ReplyDelete
    Replies
    1. That's why people must go to school, to learn an attitude...

      angelimus.com

      Delete
  16. Is there a way of assigning the TD's an id?

    ReplyDelete
  17. Thanks a lot,it was the main part of my project which i was struggling a lot!!!

    ReplyDelete
  18. can u tell me how to store the same data

    ReplyDelete
  19. đồng tâm
    game mu
    cho thuê nhà trọ
    cho thuê phòng trọ
    nhac san cuc manh
    số điện thoại tư vấn pháp luật miễn phí
    văn phòng luật
    tổng đài tư vấn pháp luật
    dịch vụ thành lập công ty trọn gói

    "Tuy nói hắn thành tích không nhỏ, chính tích rõ rệt, nhưng trong vòng mười năm từ một vị trí quan cửu phẩm nhỏ bé mà leo lên tứ phẩm... Cơ hồ chính là một năm thăng quan một lần… Loại tốc độ lên chức này quá nhanh, đây là nghi điểm thứ mười một."

    "Con có tài nhưng không cho vào làm quan, bề ngoài là tránh miệng lưỡi thế gian trong khi hắn chưa từng làm quan ở Thiết Vân thành trước đó. Vậy hắn muốn tránh thế gian hiềm nghi ở nơi nào? Hơn nữa, chính mình lại trông chừng nhi tử, cùng ngoại giới tiếp xúc không nhiều lắm, cũng rất khó khăn dâng lên bất cứ cái gì gọi là “tâm tư trung thành thà chết chứ không sờn lòng” đối với Thiết Vân thành. Hành vi này là điều khó giải thích nhất, nhưng lại hàm chứa ý nghĩa khá sâu sa. Nhi tử thủy chung làm nông phu canh tác, nhưng lại không ngừng học thi thư… Buồn cười, nếu không muốn làm quan thì học để làm gì? Vì ai mà chuẩn bị?"

    Nụ cười của Sở Dương từ từ trở nên lạnh: "Đây là nghi điểm thứ mười hai!"

    "Có mười hai nghi điểm này, dù hắn có là thánh nhân thật thì ta cũng muốn giết!" Trong mắt Sở Diêm Vương lộ ra một loại quang thải lập lòe và sắc bén tựa u minh.
    Ô Thiến Thiến cực kỳ chấn động, nàng thật sự không thể tưởng được rằng một vị quan thanh chánh liêm minh tốt là thế, vậy mà Sở Dương chẳng qua chỉ nhìn nhìn tư liệu mà đã có thể tìm ra nhiều điểm đáng ngờ rõ ràng tới vậy rồi!

    Mặc dù trong đó cũng có một vài phỏng đoán ít nhiều có vẻ cưỡng từ đoạt lý, nhưng nhiều điểm

    ReplyDelete
  20. I want to tell you that your subject is very interesting and important nowadays. There are so many scientists which can lie in their doctorates or something else. I hope you is not among people and I think best custom writing service can write different articles for your blog.

    ReplyDelete
  21. i appreciate the effort of the writer. He did a great work . keep sharing. live blogs

    ReplyDelete
  22. how to add table using selectbox

    ReplyDelete
  23. thanks you very much for the answer

    ReplyDelete
  24. This detailed analysis answers my all queries. In future it really helps me out. Digitizing Services

    ReplyDelete
  25. I am so much excited after reading your proessaywriting.com blog. Your blog is very much innovative and much helpful for any industry as well as for person.

    ReplyDelete
  26. Very impressive publication here. Moreover as I see, this question is very actual for many people indeed. Personally I totally agree with author opinion about this subject and I think that it would be really interesting to create such discussion with other this website visitors. Anyway thanks a lot www.write-an-essay.org/ one more time for the great and informative publication. And I will definitely be waiting for more such nice posts like this one from you. Kind regards, Peter Rickson.

    ReplyDelete
  27. how to insert that dynamic data into database

    ReplyDelete
  28. You will find instances wherever we've observed picture launching is unsuccessful because of numerous factors, the absolute most observe is INCHESPicture not launching - DidN't fill the provided URL” due to picture document isn't situated in exactly the same area as that's specific or might be picture document is damaged. And it'll be very hard to recognize unacceptable pictures when there are lots of within the programs
    . For more info on this try this link

    ReplyDelete
  29. this Validation pop-up is not a JavaScript pop-up, it is a Browser dialogue window which selenium cannot manage merely applying sendKeys technique which we do for regular JavaScript pop-ups.
    Remove PDF wording And Examine Text Contained In PDF employing WebDriver
    All of the applications offers HAProduce PDF' operation
    . For more info on this open this link

    ReplyDelete
  30. Hi i need a Edit and Save Option using button along with delete button in a table please tell me how to modify it and please give me the source code for the program also....

    ReplyDelete
  31. International students, you may be wonderful writers in your first language, but you’ll still need to master writing in English if you’re attending schools in the US, UK, Canada,http://www.huffingtonpost.com/donna-marie-williams/college-students-use-essa_b_8773028.html
    or Australia. You may be tempted to use essay writing services because of language differences, but I encourage you to strive for writing mastery. Use a service to edit the papers you write yourself.

    ReplyDelete
  32. To compensate for bad time management,http://www.huffingtonpost.com/donna-marie-williams/college-students-use-essa_b_8773028.html poor writing skills, or both, some students are outsourcing their papers to essay writing services. As a writer, I have mixed feelings about this approach.

    ReplyDelete
  33. Much thanks to you for the immense article I did delighted in understanding it, I will make certain to bookmark your online journal and unquestionably will return from once more.
    MATLAB Project Help

    ReplyDelete
  34. I’m really impressed with your article, such great & usefull knowledge you mentioned here
    University Essay Writing

    ReplyDelete
  35. yeah it was such an awesome blog that i have updated.. :)
    IFRS Accounting Help

    ReplyDelete
  36. Decent post. It is really helpful to us. An opportunity to read a fantastic and imaginary article. Its really a good article. It gives me lots of pleasure and interest.
    Nimco packaging machine, Namkeen packaging machine

    ReplyDelete