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

Question

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

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, Dec 30 '11 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, Dec 30 '11 at 12:44
@rajkamal I want only the last two rows of the table should increment and it should be aligned like the above screenshot — Bala, Jan 31 '12 at 09:27

score 4 · Accepted Answer · answered Feb 04 '12 at 08:59

4

I believe I have properly understood your requirement.
Try out this fiddle http://jsfiddle.net/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.

answered Feb 04 '12 at 08:59

Jibi Abraham

4,636
2
31
60

I will try your answer now, thanks alot for giving me some hopes to solve this issue. – Bala Feb 04 '12 at 09:04
best of luck. It should be easy for you from there on – Jibi Abraham Feb 04 '12 at 12:48

score 1 · Answer 2 · edited May 23 '17 at 11:45

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.net/GGS4N/ This is in answer to another question Smooth out this jQuery toggle animation?. Focus on the methodology as listed below:

To create a dummy HTML structure(generic in nature).
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! :)

Rohit · Answer 3 · 2012-02-07T14:23:02.790

1

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.

edited Feb 07 '12 at 14:23

answered Feb 06 '12 at 22:08

Rohit

35
8

score 0 · Answer 4 · answered Jan 31 '12 at 09:26

0

Is this more like what you expected?

http://jsfiddle.net/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.

answered Jan 31 '12 at 09:26

Shane

2,007
18
33

if i click the add button, it should add the last two rows with remove button as i shown in the screenshot – Bala Jan 31 '12 at 09:29
Yes. I have made a few major(ish) changes to acheive the table headers as you specified above. Of course it is up to you to approve them or not. – Shane Jan 31 '12 at 09:44
Thanks but if i click the add button, it is suppose to add row, but instead, nothing is happening. – Bala Jan 31 '12 at 09:49
Yes, because you are passing the wrong data to ins_Row. You should be passing divIdName however you are passing tab_id – Shane Jan 31 '12 at 09:53
Even if I do that, it didn't worked when i tried passing divIdName instead of num. – Bala Jan 31 '12 at 09:54
Because there are still a lot of errors - no worries, I have almost finished. – Shane Jan 31 '12 at 10:07
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/7190/discussion-between-shane-and-bala-c) – Shane Jan 31 '12 at 10:16

score 0 · Answer 5 · answered Feb 07 '12 at 01:43

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>

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

Problem

Expected output

Present output

5 Answers5