通过javascript将数组打印到表格中 [英] Printing array into table through javascript

问题描述

目前，当您在由特殊标识的4个文本框中添加一些值时，它会以串联字符串形式输出。我怎么把它分解成一个表格，我可以很好地将它打印在表格中。

  $ 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）; 
 
对于（i = 0;我< 4; attr（{
'name'：'name ['+ ctr +'] ['+ i +']）{
 $（'< input type =hidden>'）。 '，
'value'：dailyDeal [i] 
}）。appendTo（elem）; 
 
 $ b $（'< a>'）。attr（{
'href'：'＃'
}）。text（X） .click（function（）{
 $（elem）.remove（）; 
 // ctr--; 
 return false; 
}）。appendTo（elem）; 
 
 $ list.append（elem）; 
 ctr ++; 
 
 document.getElementById（dailydeals）。innerHTML =''; 
返回false; 
} else {
 document.getElementById（dailydeals）。innerHTML ='*请填写上面所有必填字段。 
返回false; 
} 
}）; 
  

代码如下：
http://jsfiddle.net/protron/xGhnv/4/

解决方案

JSFiddle的完整解决方案nofollow> http://jsfiddle.net/protron/xGhnv/9/

基本上我做的是：

1. 在HTML中，我将< div> 称为 list 为新的< table> ：

     < table id =tableDailyDeals>< / table> 
     




2. 在Javascript中，不要调用 $（elem）.text （... 我在刚刚定义的表中创建了一个新的表格行（< tr> ）

     var $ tr = $（'< tr>'）。appendTo（'＃tableDailyDeals'）; 
     

然后，除了为每个dailyDeal属性添加输入隐藏（对于0到3）我还创建了一个表格单元格（< td> ），并在其中创建了一个新的< span> 你已经在你的数组中有名为 dailyDeal （span是可选的，但是我也将输入隐藏在同一个td中，我认为这样更好）：

  var $ td = $（'< td>）。appendTo（$ tr）; 
 $（'< ; span>'）。text（dailyDeal [i]）。appendTo（$ td）; 
  




3. 然后，为删除行链接添加另一个表格单元格（< td> ）：

     var $ tdRemoveRow = $（'< td>'）。ap pendTo（$ tr）; 
     

只是一些CSS样式和小细节。

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/

解决方案

Full solution on JSFiddle:

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

Basically what I did was:

1. In the HTML I replaced the <div> called list for a new <table>:

   <table id="tableDailyDeals"></table>
   

2. 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');
   

3. 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);
   

4. 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.

这篇关于通过javascript将数组打印到表格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！