javascript - How to generate Divs containing tables with dynamically addable and removable rows? - JSfiddle Added - Stack Overfl

admin管理员组

文章数量:1289621

In the JSFiddle, I am trying to generate divs dynamically using javascript. Those divs will contain tables where the last two rows can be incremented using the add button.

I have tried the code in the fiddle. The ins_row() function is used to add rows in the table which are generated within the divs.

The addEvent() function is used to generate divs

When the Add product button is clicked a div containing a table with one row will get generated.

When the add button is clicked the last two rows should keep on getting added as per the clicks. If the remove button straight to the div is clicked the whole table and div should be deleted.

When the remove button straight to the generated rows is clicked, only that row should be deleted and not the whole div.

Problem

The problem here is the divs with table are getting generated but I couldn't figure out how to add the rows in the table.

See it in action here

Expected output

Note: I have just pasted the external JS file into the javascript column of the above fiddle as I don't have the resource link.

Present output

I hope I have presented the question understandable, if anything is not clear, Please let me know

In the JSFiddle, I am trying to generate divs dynamically using javascript. Those divs will contain tables where the last two rows can be incremented using the add button.

I have tried the code in the fiddle. The ins_row() function is used to add rows in the table which are generated within the divs.

The addEvent() function is used to generate divs

When the Add product button is clicked a div containing a table with one row will get generated.

When the add button is clicked the last two rows should keep on getting added as per the clicks. If the remove button straight to the div is clicked the whole table and div should be deleted.

When the remove button straight to the generated rows is clicked, only that row should be deleted and not the whole div.

Problem

The problem here is the divs with table are getting generated but I couldn't figure out how to add the rows in the table.

See it in action here

Expected output

Note: I have just pasted the external JS file into the javascript column of the above fiddle as I don't have the resource link.

Present output

I hope I have presented the question understandable, if anything is not clear, Please let me know

• javascript
• jquery
• dom

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Dec 30, 2011 at 11:45 BalaBala 3,6381010 gold badges4747 silver badges7575 bronze badges 4

• 2 That is way too much code to work with. Please try to duplicate this on a smaller scale if you want people to practically consider nitpicking it for errors. – Purag Commented Dec 30, 2011 at 12:24
• @Purmou +1...Its not actually a huge code, i just added a note conveying that i just pasted the external plugin JS as there is no link for it..that is why it looks huge in the javascript pane in the fiddle.! I am trying my level best to fix it, if i find any solution, i will update the answer...! – Bala Commented Dec 30, 2011 at 12:44
• are you looking for this jsfiddle/7AeDQ/80 – Rajkamal Subramanian Commented Jan 31, 2012 at 9:24
• @rajkamal I want only the last two rows of the table should increment and it should be aligned like the above screenshot – Bala Commented Jan 31, 2012 at 9:27

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4 +50

I believe I have properly understood your requirement.
Try out this fiddle http://jsfiddle/Kucuk/14/

It uses jquery though - its just a sample sort of thing that you could probably base your own code off. Its all doable in plain old JavaScript, if that's what you prefer. The styling is a bit off, but that you can handle I hope.

Do let me know if this helps you in some manner.

Generally, I use jQuery's appendTo() function alongwith a dummy html structure. I store this in a variable & follow it up with further attribute manipulation.

To get an idea of what I am talking about, just check this fiddle: http://jsfiddle/GGS4N/ This is in answer to another question Smooth out this jQuery toggle animation?. Focus on the methodology as listed below:

1. To create a dummy HTML structure(generic in nature).
2. On your desired event, triggering of population and manipulation of the dynamic elements into the dom, with giving them an identifiers and manipulating other specific attributes, and as seen in the fiddle, even animating them.

If you prefer raw JS, as seen from your code, you can implement the same functionality in raw JS too! :)

Try this fiddle to see if it works for you.

In this example, when you click on add product, all 4 textboxes are created with an add more rows and remove div buttons.

When you click on add rows, last two textboxes are created with a remove row button.

Whenever the row count of a product is more than 1, the remove div button is hidden and is shown again when the row count is 1.

Is this more like what you expected?

http://jsfiddle/7AeDQ/81/

I achieved this by adding styles to widen the table and the cell containing the buttons. I also changed the buttons to input type="button".

Hope this works for you.

EDIT: I have just noticed that I mixed up your expected output and present output. Working on expected output now.

Another pure js solution

<html>
    <body>
        <script>
            var tblCount = 0
            var tblIdStr = "productTbl";

            function removeRow(id, rowNumber) {
                var el = document.getElementById(id);
                el.deleteRow(rowNumber);
            }

            function addTable() {
                            ++tblCount;
                tblId = tblIdStr + tblCount;
                var args = "'" + tblId + "'";
                var tblHtml = '<tr><td>Product name</td><td>Price</td><td>Competitor</td><td>Price</td></tr><tr><td><input type="text"></td><td><input type="text"><td><input type="text"></td><td><input type="text"></td><td><input type="button" value="Add" onclick="addRow(' + args + ')"></td><td></td></tr>'
                var tbl = document.createElement("table");
                tbl.setAttribute("id", tblId);
                document.getElementById("container").appendChild(tbl)
                document.getElementById(tblId).innerHTML = tblHtml;

            }

            function addRow(id) {
                var el = document.getElementById(id)
                var rowCount = el.rows.length;
                var row = el.insertRow(rowCount);
                //console.log(row)
                var args = "'" + id + "'" + "," + rowCount;
                var tblRowHtml = '<td colspan=2></td><td><input type="text"></td><td><input type="text"></td><td><input type="button" value="remove" onclick="removeRow(' + args + ')"></td>';
                //el.rows[rowCount].setAttribute("id", rowId);
                el.rows[rowCount].innerHTML = tblRowHtml

            }
        </script>
        <input type="button" value="Add new product table" onclick="addTable()">
        <div id="container">

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

本文标签：