1

現在、「Special」で識別される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/

4

1 に答える 1

1

JSFiddleの完全なソリューション：

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

  3. 次に、input-hidden各dailyDeal属性（0〜3）にforを追加するほかに、テーブルセル（）を作成し、その中に、配列にすでにある名前のテキストを<td>含む新しいものを作成します（スパンはオプションですが、入力も入力します） -同じtdに隠されているので、この方法の方が良いと思います）：<span>dailyDeal

    var $td = $('<td>').appendTo($tr);
$('<span>').text(dailyDeal[i]).appendTo($td);

  4. <td>次に、行リムーバーリンク用に別のテーブルセル（）を追加します。

    var $tdRemoveRow = $('<td>').appendTo($tr);

残りは、CSSのスタイリングと細部です。

于 2012-10-13T00:38:09.347 に答える