通过javascript将数组打印到表中

时间:2012-10-12 21:07:18

标签: javascript html

目前,当您在“特殊”标识的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);

        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;
    }
});

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

1 个答案:

答案 0 :(得分:1)

JSFiddle的完整解决方案:

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

基本上我做的是:

  1. 在HTML中,我为<div>替换了名为list的{​​{1}}:

    <table>
  2. 在Javascript中而不是调用<table id="tableDailyDeals"></table> 我在刚刚定义的表中创建了一个新的表行($(elem).text(...):

    <tr>
  3. 然后除了为每个dailyDeal属性(0到3)添加var $tr = $('<tr>').appendTo('#tableDailyDeals'); 之外,我还创建了一个表格单元格(input-hidden),并在其中创建了一个新的<td>你已经在你的数组中已经有一个名为<span>的文本(span是可选的,但是我也把输入隐藏在同一个td中我认为这样更好):

    dailyDeal
  4. 然后只为行卸妆链接添加另一个表格单元格(var $td = $('<td>').appendTo($tr); $('<span>').text(dailyDeal[i]).appendTo($td); ):

    <td>
  5. 其余的只是一些CSS样式和细节。