动态创建控件

发布于 2024-10-15 08:03:11 字数 200 浏览 1 评论 0原文

我想创建一个用于输入销售订单详细信息的屏幕。

我想尽快加快流程

所以我有一个带有两个文本框的表格

Product name           Qty   +

所以如果我单击+我想在产品名称和数量下创建新的文本框。项目数量可以是 50 个或更多。我该怎么做？

原文

i want create a screen for entering Sales Order details.

i want to fasten the process as fast as possible

So i have a table with two text boxes

Product name           Qty   +

So if i click on + i want to create new text boxes under Product name and Qty. The number of items may be 50 or more.
How can i do this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拥抱影子 2024-10-22 08:03:11

您可以使用 jQuery。像这样的东西

$('.plus').click(function() {
  $(this).append('<input type="text">');
})

You can use jQuery. Something like

$('.plus').click(function() {
  $(this).append('<input type="text">');
})

回复收藏 0 原文

北座城市 2024-10-22 08:03:11

下面是一个使用初始行克隆的示例。使用 jsFiddle 进行实时尝试。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Add Input Rows</title>
<script type="text/javascript">
function addEvent(el, name, handler)
{
    if (typeof window.addEventListener != "undefined")
    {
        el.addEventListener(name, handler, false);
    }
    else
    {
        el.attachEvent("on" + name, handler);
    }
};

addEvent(window, "load",function()
{
    var productRows = document.getElementById("productRows");
    var clonedRow = productRows.getElementsByTagName("tr")[0].cloneNode(true);
    addEvent(document.getElementById("addProductRow"), "click", function()
    {
        productRows.appendChild(clonedRow.cloneNode(true));
    });
});
</script>
</head>
<body>

<table>
<thead>
  <tr>
    <th>Product name</th>
    <th>Qty</th>
    <th><input type="button" id="addProductRow" value="+"></th>
  </tr>
</thead>
<tbody id="productRows">
  <tr>
    <td><input type="text" name="name"></td>
    <td><input type="text" name="qty"></td>
  </tr>
</tbody>
</table>

</body>
</html>

如果您想继续添加删除动态添加的行的功能，您可以执行类似的操作 (jsFiddle ）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Add & Remove Input Rows</title>
<script type="text/javascript">
function addEvent(el, name, handler)
{
    if (typeof window.addEventListener != "undefined")
    {
        el.addEventListener(name, handler, false);
    }
    else
    {
        el.attachEvent("on" + name, handler);
    }
}

addEvent(window, "load", function()
{
    var productRows = document.getElementById("productRows"),
        templateRow = (function() {
            var clonedRow = productRows.getElementsByTagName("tr")[0].cloneNode(true),
                removeButton = document.createElement("input");
            removeButton.type = "button";
            removeButton.value = "-";
            removeButton.title = "Click to remove this row";
            clonedRow.getElementsByTagName("td")[2].appendChild(removeButton);
            return clonedRow;
        })();

    addEvent(document.getElementById("addProductRow"), "click", function()
    {
        var row = templateRow.cloneNode(true),
            removeButton = row.getElementsByTagName("td")[2].getElementsByTagName("input")[0];
        addEvent(removeButton, "click", function()
        {
            productRows.removeChild(row);
        });
        productRows.appendChild(row);
    });
});
</script>
<style>
th.buttons input, td.buttons input { width: 100%; }
</style>
</head>
<body>

<table>
<thead>
  <tr>
    <th>Product name</th>
    <th>Qty</th>
    <th class="buttons"><input type="button" id="addProductRow" title="Click to add a new row" value="+"></th>
  </tr>
</thead>
<tbody id="productRows">
  <tr>
    <td><input type="text" name="name"></td>
    <td><input type="text" name="qty"></td>
    <td class="buttons"></td>
  </tr>
</tbody>
</table>

</body>
</html>

如果您想在用户尝试删除填充的行时用烦人的弹出窗口来困扰他们，请交换此位（jsFiddle):

addEvent(removeButton, "click", function()
{
    var inputs = row.getElementsByTagName("input"),
        confirmRemove = false;
    for (var i = 0, input; input = inputs[i]; i++)
    {
        if (input.type == "text" && input.value !== "")
        {
            confirmRemove = true;
            break;
        }
    }

    if (!confirmRemove ||
        confirm("This row contains data. Are you sure you want to remove it?"))
    {
        productRows.removeChild(row);
    }
});

Here's an example which uses cloning of an initial row. Try it live with jsFiddle.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Add Input Rows</title>
<script type="text/javascript">
function addEvent(el, name, handler)
{
    if (typeof window.addEventListener != "undefined")
    {
        el.addEventListener(name, handler, false);
    }
    else
    {
        el.attachEvent("on" + name, handler);
    }
};

addEvent(window, "load",function()
{
    var productRows = document.getElementById("productRows");
    var clonedRow = productRows.getElementsByTagName("tr")[0].cloneNode(true);
    addEvent(document.getElementById("addProductRow"), "click", function()
    {
        productRows.appendChild(clonedRow.cloneNode(true));
    });
});
</script>
</head>
<body>

<table>
<thead>
  <tr>
    <th>Product name</th>
    <th>Qty</th>
    <th><input type="button" id="addProductRow" value="+"></th>
  </tr>
</thead>
<tbody id="productRows">
  <tr>
    <td><input type="text" name="name"></td>
    <td><input type="text" name="qty"></td>
  </tr>
</tbody>
</table>

</body>
</html>

If you wanted to go on and add the ability to remove dynamically added rows, you could do something like this (jsFiddle):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Add & Remove Input Rows</title>
<script type="text/javascript">
function addEvent(el, name, handler)
{
    if (typeof window.addEventListener != "undefined")
    {
        el.addEventListener(name, handler, false);
    }
    else
    {
        el.attachEvent("on" + name, handler);
    }
}

addEvent(window, "load", function()
{
    var productRows = document.getElementById("productRows"),
        templateRow = (function() {
            var clonedRow = productRows.getElementsByTagName("tr")[0].cloneNode(true),
                removeButton = document.createElement("input");
            removeButton.type = "button";
            removeButton.value = "-";
            removeButton.title = "Click to remove this row";
            clonedRow.getElementsByTagName("td")[2].appendChild(removeButton);
            return clonedRow;
        })();

    addEvent(document.getElementById("addProductRow"), "click", function()
    {
        var row = templateRow.cloneNode(true),
            removeButton = row.getElementsByTagName("td")[2].getElementsByTagName("input")[0];
        addEvent(removeButton, "click", function()
        {
            productRows.removeChild(row);
        });
        productRows.appendChild(row);
    });
});
</script>
<style>
th.buttons input, td.buttons input { width: 100%; }
</style>
</head>
<body>

<table>
<thead>
  <tr>
    <th>Product name</th>
    <th>Qty</th>
    <th class="buttons"><input type="button" id="addProductRow" title="Click to add a new row" value="+"></th>
  </tr>
</thead>
<tbody id="productRows">
  <tr>
    <td><input type="text" name="name"></td>
    <td><input type="text" name="qty"></td>
    <td class="buttons"></td>
  </tr>
</tbody>
</table>

</body>
</html>

If you want to pester your users with annoying popups if they try to delete populated rows, swap in this bit (jsFiddle):

addEvent(removeButton, "click", function()
{
    var inputs = row.getElementsByTagName("input"),
        confirmRemove = false;
    for (var i = 0, input; input = inputs[i]; i++)
    {
        if (input.type == "text" && input.value !== "")
        {
            confirmRemove = true;
            break;
        }
    }

    if (!confirmRemove ||
        confirm("This row contains data. Are you sure you want to remove it?"))
    {
        productRows.removeChild(row);
    }
});

回复收藏 0 原文

~没有更多了~