Printing array into table through javascript

Question

Currently when you add some values in the 4 textboxes identified by "Special" it outputs in a concatenated string. How would I break that up into a table where I could print it out in a table nicely.

$add.click(function() {
    var elem = document.createElement("div");
    var dmenu = document.getElementById("days");
    var dmenuvalue = dmenu.options[dmenu.selectedIndex].text;
    var regex = /^\d+(?:\.\d{0,2})$/;
    if (dmenuvalue != "temp" && $name.val().indexOf("%") == -1 && ($origprice.val().indexOf("%") == -1 && regex.test($origprice.val())) && ($specprice.val().indexOf("%") == -1 && regex.test($specprice.val()))) {

        var name = dmenuvalue + "%" + $name.val() + "%" + $origprice.val() + "%" + $specprice.val();
        $(elem).text(name);

        var dailyDeal = [
            dmenuvalue,
            $name.val(),
            $origprice.val(),
            $specprice.val()
        ];
        dailyDeals.push(dailyDeal);

        for (i = 0; i < 4; i++) {
            $('<input type="hidden">').attr({
                'name': 'name[' + ctr + '][' + i + ']',
                'value': dailyDeal[i]
            }).appendTo(elem);
        }

        $('<a>').attr({
            'href': '#'
        }).text("X").click(function() {
            $(elem).remove();
            //ctr--; 
            return false;
        }).appendTo(elem);

        $list.append(elem);
        ctr++;

        document.getElementById("dailydeals").innerHTML = '';
        return false;
    } else {
        document.getElementById("dailydeals").innerHTML = '*Please complete all required fields above.';
        return false;
    }
});

The code is below: http://jsfiddle.net/protron/xGhnv/4/

That's a lot of code to sort through. Couldn't you just include the bare minimum? — Daedalus
– Daedalus, Commented Oct 12, 2012 at 21:08
Denver, you will have to add a new table tag under the <div id = "list" >. and instead of the code which loops 4 times and creates an input of type hidden , you will have to generate table <tr> with the 4 <td>s and append it to the table. I started working on the fiddle but I cant complete it right now. I will post it later tonight if someone else still hasn't answered it. — Rohan Grover
– Rohan Grover, Commented Oct 12, 2012 at 22:04

Mariano Desanze · Accepted Answer · 2012-10-13 00:38:09Z

1

Full solution on JSFiddle:

http://jsfiddle.net/protron/xGhnv/9/

Basically what I did was:

In the HTML I replaced the <div> called list for a new <table>:
```
<table id="tableDailyDeals"></table>
```
In the Javascript instead of calling $(elem).text(... I create a new table row (<tr>) in the table just defined:
```
var $tr = $('<tr>').appendTo('#tableDailyDeals');
```
Then besides adding the input-hidden for each dailyDeal attribute (for 0 to 3) I also create a table cell (<td>) and inside it a new <span> with the text you already have in your array named dailyDeal (the span is optional, but as I also put the input-hidden in the same td I think is better this way):
```
var $td = $('<td>').appendTo($tr);
$('<span>').text(dailyDeal[i]).appendTo($td);
```
Then just add another table cell (<td>) for the row remover link:
```
var $tdRemoveRow = $('<td>').appendTo($tr);
```

The rest is just some css styling and minor details.

answered Oct 13, 2012 at 0:38

Mariano Desanze

8,2587 gold badges49 silver badges72 bronze badges

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

1 Comment

Denver Over a year ago

Man, you are the king. Much appreciated.

Collectives™ on Stack Overflow

Printing array into table through javascript

1 Answer 1

Full solution on JSFiddle:

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Full solution on JSFiddle:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related