比较来自世界各地的卖家的域名和 IT 服务价格

动态添加字符串 jQuery

我在其中创建一个表格，我需要几个额外的入口，以及我拥有的，主要是：

https://i.stack.imgur.com/lWvUW.png
每次用户按下加号按钮时，应将新的输入形状线添加到表单中，因为我可以在 jQuery?

此外，可以在所有行自动添加新字符串

/或者，如果它更容易，只是最后一行 / 快点/

填充？

因此，用户不需要按下按钮 "一个好处".

对不起，我问，也许这么简单的问题，但我仍然很绿 jQuery, 我可以用它 PHP, 但我相信 Javascript / jQuery 在这里扮演更合适的角色。

先感谢您！

@alex:


html

<head>

<script src="[url=http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"]http://ajax.googleapis.com/aja ... ot%3B[/url] type="text/javascript"></script>

<script type="text/javascript">

$form = $/'#personas'/;

$rows = $form.find/'.person'/;



$/'a#add'/.click/function// {

 $rows.find/':first'/.clone//.insertAfter/$rows.find/':last'//;

 $justInserted = $rows.find/':last'/;

 $justInserted.hide//;

 $justInserted.find/'input'/.val/''/; // it may copy values from first one

 $justInserted.slideDown/500/;

}/;

</script>

</head>

<body>

<form action="" id="personas" method="post" name="personas">

<table border="1" cellpadding="2" cellspacing="0" width="300">

<tr>

<td>Name</td>

<td>More?</td>

</tr>

<tr class="person">

<td><input id="name[]" name="name[]" type="text"/></td>

<td><a href="#" id="add">+</a></td>

</tr>

</table>

</form>

</body>
2021-03-20 添加评论
分享

没有找到相关结果

    已邀请:

    窦买办

    赞同来自:

    它将帮助您接近，从表中删除添加按钮，因此您可能需要考虑它......


    <script type="text/javascript">
    
 $/document/.ready/function// {
    
 $/"#add"/.click/function// {
    
 $/'#mytable tbody>tr:last'/.clone/true/.insertAfter/'#mytable tbody>tr:last'/;
    
 return false;
    
 }/;
    
 }/;
    
</script>


    HTML markup 看起来像那样


    <a id="add">+</a>
    
<table border="1" cellpadding="2" cellspacing="0" id="mytable" width="300">
    
<tbody>
    
<tr>
    
<td>Name</td>
    
</tr>
    
<tr class="person">
    
<td><input id="name" name="name" type="text"/></td>
    
</tr>
    
</tbody>
    
</table>


    编辑

    , 清除价值 textbox 插入后..


    $/'#mytable tbody>tr:last'/.clone/true/.insertAfter/'#mytable tbody>tr:last'/;
    
 $/'#mytable tbody>tr:last #name'/.val/''/;
    
 return false;


    EDIT2

    我不能对我做任何事情来重置插入中的所有下拉列表 TR 你能行的


    $/"#mytable tbody>tr:last"/.each/function// {this.reset//;}/;


    我会离开它 rest 你！
    2021-03-21 0 0
    分享

    冰洋

    赞同来自:

    除了上面的答案之外：您可能需要更改名称中的标识符/输入元素的标识符 /请注意，您不应该以字段名称有数字。/:


    <input ..="" id="someStuff_fdf_fieldOne_2" name="someStuff.entry[2].fieldOne"/>


    我做了一些全局默认变量相等 0:


    var globalNewIndex = 0;


    和功能 add 克隆并重置新行中的值后：


    var newIndex = globalNewIndex+1;
    
 var changeIds = function/i, val/ {
    
 return val.replace/globalNewIndex,newIndex/;
    
 }
    
 $/'#mytable tbody>tr:last input'/.attr/'name', changeIds /.attr/'id', changeIds /;
    
 globalNewIndex++;
    2021-03-21 0 0
    分享

    知食

    赞同来自:

    我尝试了那样的东西，它有效;


    这是一部分 html :


    <table class="dd" id="data" width="100%">
    
<tr>
    
<td>Year</td>
    
<td>:</td>
    
<td><select id="year1" name="year1">
    
<option value="2012">2012</option>
    
<option value="2011">2011</option>
    
</select></td>
    
<td>Month</td>
    
<td>:</td>
    
<td width="17%"><select id="month1" name="month1">
    
<option value="1">January</option>
    
<option value="2">February</option>
    
<option value="3">March</option>
    
<option value="4">April</option>
    
<option value="5">May</option>
    
<option value="6">June</option>
    
<option value="7">July</option>
    
<option value="8">August</option>
    
<option value="9">September</option>
    
<option value="10">October</option>
    
<option value="11">November</option>
    
<option value="12">December</option>
    
</select></td>
    
<td width="7%">Week</td>
    
<td width="3%">:</td>
    
<td width="17%"><select id="week1" name="week1">
    
<option value="1">1</option>
    
<option value="2">2</option>
    
<option value="3">3</option>
    
<option value="4">4</option>
    
</select></td>
    
<td width="8%"> </td>
    
<td colspan="2"> </td>
    
</tr>
    
<tr>
    
<td>Actual</td>
    
<td>:</td>
    
<td width="17%"><input id="actual1" name="actual1" type="text"/></td>
    
<td width="7%">Max</td>
    
<td width="3%">:</td>
    
<td><input id="max1" name="max1" type="text"/></td>
    
<td>Target</td>
    
<td>:</td>
    
<td><input id="target1" name="target1" type="text"/></td>
    
</tr>



    这是 Javascript 部分;


    <script src="[url=http://code.jquery.com/jquery-latest.js"></script>]http://code.jquery.com/jquery- ... gt%3B[/url]
    
<script type="text/javascript">
    
//<![CDATA[
    
$/document/.ready/function// {
    
var currentItem = 1;
    
$/'#addnew'/.click/function//{
    
currentItem++;
    
$/'#items'/.val/currentItem/;
    
var strToAdd = '<tr><td>Year</td><td>:</td><td><select name="year'+currentItem+'" id="year'+currentItem+'" ><option value="2012">2012</option><option value="2011">2011</option></select></td><td>Month</td><td>:</td><td width="17%"><select name="month'+currentItem+'" id="month'+currentItem+'"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select></td><td width="7%">Week</td><td width="3%">:</td><td width="17%"><select name="week'+currentItem+'" id="week'+currentItem+'" ><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select></td><td width="8%"></td><td colspan="2"></td></tr><tr><td>Actual</td><td>:</td><td width="17%"><input name="actual'+currentItem+'" id="actual'+currentItem+'" type="text" /></td><td width="7%">Max</td> <td width="3%">:</td><td><input name="max'+currentItem+'" id ="max'+currentItem+'"type="text" /></td><td>Target</td><td>:</td><td><input name="target'+currentItem+'" id="target'+currentItem+'" type="text" /></td></tr>';
    
 $/'#data'/.append/strToAdd/;
    

    
 }/;
    
 }/;
    

    
 //]]>
    
 </script>


    最后 PHP 提交部分：


    for/ $i = 1; $i &lt;= $count; $i++ /
    
{
    
 $year = $_POST['year'.$i];
    
 $month = $_POST['month'.$i];
    
 $week = $_POST['week'.$i];
    
 $actual = $_POST['actual'.$i];
    
 $max = $_POST['max'.$i];
    
 $target = $_POST['target'.$i];
    
 $extreme = $_POST['extreme'.$i];
    
 $que = "insert INTO table_name/id,year,month,week,actual,max,target/ VALUES /'".$_POST['type']."','".$year."','".$month."','".$week."','".$actual."','".$max."','".$target."'/";
    
 mysql_query/$que/;
    

    
}


    您可以找到更多详细信息
    https://www.iranthajayasekara. ... .html
    </table>
    2021-03-21 0 0
    分享

    涵秋

    赞同来自:

    未经测试。
    根据要求修改：


    $form = $/'#my-form'/;
    

    
$rows = $form.find/'.person-input-row'/;
    

    
$/'button#add-new'/.click/function// {
    

    
 $rows.find/':first'/.clone//.insertAfter/$rows.find/':last'//;
    

    
 $justInserted = $rows.find/':last'/;
    
 $justInserted.hide//;
    
 $justInserted.find/'input'/.val/''/; // it may copy values from first one
    
 $justInserted.slideDown/500/;
    

    

    
}/;


    它比复制更好 innerHTML, 因为你将失去所有附加的事件等。
    2021-03-21 0 0
    分享

    小姐请别说爱

    赞同来自:

    根据其他答案，我简化了一点情况。 克隆最后一个元素，我们得到一个按钮 "add new" 免费 /你必须改变 ID 在克隆的课堂上/, 并减少操作 DOM. 我不得不使用 filter// 反而 find//, 只得到最后一个元素。


    $/'.js-addNew'/.on/'click', function/e/ {
    
 e.preventDefault//;
    
 var $rows = $/'.person'/,
    
 $last = $rows.filter/':last'/,
    
 $newRow = $last.clone//.insertAfter/$last/;
    

    
 $last.find/$/'.js-addNew'//.remove//; // remove old button
    
 $newRow.hide//.find/'input'/.val/''/;
    
 $newRow.slideDown/500/;
    
}/;
    2021-03-21 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved