blocks|key|4538507|text|您可以使用jQuery。就像这样|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4538508|$('.plus').click(function()+{
++$(this).append('<input+type="text">');
})|code-block|syntax|javascript|4538509|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can use jQuery. Something like</p>

<pre><code>$('.plus').click(function() {
  $(this).append('&lt;input type="text"&gt;');
})
</code></pre>


blocks|key|1788265|text|下面是一个使用初始行克隆的示例。Try+it+live+with+jsFiddle。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1788266|<!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"+%2B+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="%2B"></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>|code-block|syntax|javascript|1788267|如果您想继续添加删除动态添加的行的功能，可以这样做(jsFiddle)：|1788268|<!DOCTYPE+html+PUBLIC+"-//W3C//DTD+HTML+4.01//EN"+"http://www.w3.org/TR/html4/strict.dtd">
<html+lang="en">
<head>
<title>Add+&amp;+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"+%2B+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%25;+}
</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="%2B"></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>|1788269|如果您想要在用户尝试删除已填充的行时使用恼人的弹出窗口来骚扰他们，请换成这一位(jsFiddle)：|1788270|addEvent(removeButton,+"click",+function()
{
++++var+inputs+=+row.getElementsByTagName("input"),
++++++++confirmRemove+=+false;
++++for+(var+i+=+0,+input;+input+=+inputs[i];+i%2B%2B)
++++{
++++++++if+(input.type+==+"text"+&&+input.value+!==+"")
++++++++{
++++++++++++confirmRemove+=+true;
++++++++++++break;
++++++++}
++++}

++++if+(!confirmRemove+%7C%7C
++++++++confirm("This+row+contains+data.+Are+you+sure+you+want+to+remove+it?"))
++++{
++++++++productRows.removeChild(row);
++++}
});|1788271|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/EBVFg/1/|1|http://jsfiddle.net/VF3wf/|2|http://jsfiddle.net/VfxSa/^0|G|P|0|0|0|Q|8|1|0|0|14|8|2|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|K|3|L|5|F|7|1B|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|O|3|P|5|F|7|1G|8|@]|9|@]|C|$G|H]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]]]

<p>Here's an example which uses cloning of an initial row. <a href="http://jsfiddle.net/EBVFg/1/" rel="nofollow">Try it live with jsFiddle</a>.</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Add Input Rows&lt;/title&gt;
&lt;script type="text/javascript"&gt;
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));
    });
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;table&gt;
&lt;thead&gt;
  &lt;tr&gt;
    &lt;th&gt;Product name&lt;/th&gt;
    &lt;th&gt;Qty&lt;/th&gt;
    &lt;th&gt;&lt;input type="button" id="addProductRow" value="+"&gt;&lt;/th&gt;
  &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody id="productRows"&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;input type="text" name="name"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" name="qty"&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>If you wanted to go on and add the ability to remove dynamically added rows, you could do something like this (<a href="http://jsfiddle.net/VF3wf/" rel="nofollow">jsFiddle</a>):</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Add &amp;amp; Remove Input Rows&lt;/title&gt;
&lt;script type="text/javascript"&gt;
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);
    });
});
&lt;/script&gt;
&lt;style&gt;
th.buttons input, td.buttons input { width: 100%; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

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

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>If you want to pester your users with annoying popups if they try to delete populated rows, swap in this bit (<a href="http://jsfiddle.net/VfxSa/" rel="nofollow">jsFiddle</a>):</p>

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

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


<p>i want create a screen for entering Sales Order details.</p>

<p>i want to fasten the process as fast as possible</p>

<p>So i have a table with two text boxes</p>

<pre><code>Product name           Qty   +
</code></pre>

<p>So if i click on <code>+</code> 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?</p>


dynamic creation of controls

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想创建一个用于输入销售订单详细信息的屏幕。我想尽可能快地加快这个过程。因此，我有一个包含两个文本框的表Product name           Qty   +因此，如果我单击+，我想在Product name和Qty下创建新的文本框。项目的数量可以是50个或更多。我该怎么做呢？

问控件的动态创建
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问控件的动态创建EN