如何在Textarea中创建列表和显示列表

时间:2013-03-09 18:30:44

标签: javascript html

我正在开发一个食品订单系统。我想在textarea中显示我的订单列表。现在我可以在div的内容中列出清单。我还希望我的结果价格在小数点后两位舍入,就像输入2一样,它将被格式化为2.00。

我的完整代码有点长。

这是我使用的JavaScript示例:

function addNewItem() {
    price = 4.50;
    result += price;
    appendElement("container", "element" + price, "Cappucino Ice Blended " + price + "<a href=\"javascript:removeItem(" + price + ")\">[Remove]</a>");
    document.getElementById('sumOrder').value = result;
}

The full code in a fiddle

2 个答案:

答案 0 :(得分:0)

要在textarea中创建新行,使其看起来像列表,您可以使用“\ n”分隔订单。

示例:http://jsfiddle.net/U58gT/

<textarea id="orders" rows="10"></textarea>

<br /><br /><br />

<input id="new-order" type="text"><button>add order</button>

$('button').click(function() {
    var new_order = $('#new-order').val();
    $('#orders').append(new_order + "\n");
});

答案 1 :(得分:0)

感谢您的回复,但我使用其他方法。我已经可以在文本区域列表了。现在我遇到问题,当我点击删除链接时删除它。在DIV我可以正常删除但textarea不删除。我在textarea中使用此代码作为生成列表 这是我使用的JavaScript示例:

    var result =0.00;
    function addtxt(input) {
        price = 4.50;
        result += price;
        var obj=document.getElementById(input)
        var txt=document.createTextNode("Cappucino Ice Blended "+ price+"\n")
        obj.appendChild(txt)
    addNewItem();}
    function addNewItem() 
    {
        appendElement("container", "element" + price, "Cappucino Ice Blended " + price + "<a href=\"javascript:removeItem(" + price + ")\">[Remove]</a>");
        document.getElementById('sumOrder').value = result;
    }

    function removeItem(price) 
    {
        result -= price;
        removeElement("container", "element" + price);
        document.getElementById('sumOrder').value = result;
    }
    function removeElement(parentId, elementId) 
    {
        var parentElement = document.getElementById(parentId);
        var childElement = document.getElementById(elementId);
        parentElement.removeChild(childElement);
    }
    function appendElement(containerId, newElementId, newElementContent) 
    {                   
        var newElement=document.createElement("div");
        newElement.setAttribute("id", newElementId);
        newElement.innerHTML=newElementContent;
        var container = document.getElementById(containerId);
        container.appendChild(newElement, container);
    }

The full code in a fiddle