我有一个动态添加按钮,当按下时会添加新行。我的第一行有一个事件:当我按下回车键时,它完成了其他输入。
如何为我的动态应用程序添加相同的功能?
以下是我的原始输入:
<td>
</br>
<div id="numlundi">
<input onblur="autre();" onfocus="enter();" size="10" type="text" id="projlundi" name="projlundi"onkeypress="return handleEnter2(event, this, 'task');"/>
</div>
</td>
<td>
</br>
<div id="clientlun">
<input type="text" name="clientlundi" class = "client" size="12" id ="clientlundi" readonly />
</div>
</td>
<td>
</br>
<div id="prodesclun">
<input type="text" name="projdesclundi" size="30" class "desc" id ="projdesclundi"readonly />
</div>
</td>
<td>
当我像07
一样输入projlundi时,它会提示07-0138
、07-0668
之类的内容。
如果我选择07-0138
并键入enter,它将为clientlundi
和projdeclundi
提供数据库中的相关信息。我想对我的新一排做同样的事情。
这是我的功能:
//------------------COMPLETE CLIENT DESC LUNDI----------------------
function handleEnter2(e, obj, field){
if (e.keyCode == 13 || e.which == 13){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
tempArrayInJS = JSON.parse(xmlhttp.responseText);
$("#clientlundi").val( tempArrayInJS[0]['cliName']);
$("#projdesclundi").val( tempArrayInJS[0]['proDescription']);
}
}
xmlhttp.open("GET","completeclient.php?q="+obj.value,true);
xmlhttp.send();
}
//Enter was pressed, handle it here
}
以下是我如何动态创建新行:
var counterlundi= 0;
var $newRow ;
$(function(){
$('#add_lundi').click(function(){
counterlundi += 1;
$('#numlundi').append(
$newRow = $('<input id="numlundi' + counterlundi + '" name="numlundi[]' + '" type="text" /> ')
)
$newRow.autocomplete(autocompOpt);
$('#clientlun').append(
( '<input id="clientlundi' + counterlundi + '" name="clientlundi[]' + '" type="text" />')
)
$('#prodesclun').append(
( '<input id="prodesclun' + counterlundi + '" name="prodesclun[]' + '" type="text" />')
)
$('#protachelun').append(
( '<textarea id="protachelun' + counterlundi + '" name="protachelun[]' + '" type="text" rows="1" cols="20" />')
)
$('#prolieudivlun').append(
( '<input id="prolieudivlun' + counterlundi + '" name="prolieudivlun[]' + '" type="text" />')
)
select = $('<select id="tachedivlun' + counterlundi + '" name="tachedivlun[]" type="text" />');
select.append($("#Selectlundi option").clone());
$("#tachedivlun").append(select);
$('#calculTempsdivlun').append(
( '<input id="calculTempsdivlun' + counterlundi + '" name="calculTempsdivlun[]' + '" type="number" size="10" min="0" max="24" value="0" />')
)
});
});
var autocompOpt = {
source:'getautocomplete.php',
minLength:1
}
你知道我该怎么做吗?谢谢你的建议!
这里是解决方案
//function append mercredi
var countermercredi= 0;
var $newRow ;
$(function(){
$('#add_mer').click(function(){
countermercredi += 1;
$newRow = $('<input id="nummer' + countermercredi + '" name="nummer[]' + '" type="text" onblur="autre();" onfocus="enter();" /> ') ; $('#nummer').append($newRow)
$newRow.keypress (function (e) { return handledynmer(event, this, 'task');})
$newRow.autocomplete(autocompOpt);
$('#clientmer').append(
( '<input id="clientmer' + countermercredi + '" name="clientmer[]' + '" readonly type="text" onblur="autre();" onfocus="enter();" />')
)
$('#prodescmer').append(
( '<input id="prodescmer' + countermercredi + '" name="prodescmer[]' + '" readonly type="text" onblur="autre();" onfocus="enter();" />')
)
$('#protachemer').append(
( '<textarea id="protachemer' + countermercredi + '" name="protachemer[]' + '" type="text" rows="1" cols="20" onblur="autre();" onfocus="enter();" />')
)
$('#prolieudivmmer').append(
( '<input id="prolieudivmmer' + countermercredi + '" name="prolieudivmmer[]' + '" type="text" onblur="autre();" onfocus="enter();" />')
)
select = $('<select id="tachedivmer' + countermercredi + '" name="tachedivmer[]" type="text" onblur="autre();" onfocus="enter();" />');
select.append($("#Selectmercredi option").clone());
$("#tachedivmer").append(select);
$('#calculTempsdivmer').append(
( '<input id="calculTempsdivmer' + countermercredi + '" name="calculTempsdivmer[]' + '" type="number" size="10" min="0" max="24" value="0" class="dynamic" onblur="autre();" onfocus="enter();"/>')
)
//désactive champs précédent.
if (countermercredi > 1 )
{
countermercredi = countermercredi - 1 ;
document.getElementById('nummer'+countermercredi).readOnly = true;
countermercredi = countermercredi + 1 ;
}
});
});
//remove mercredi
$(function(){
$('#remove_mercredi').click(function(){
var calculTempsdivmer = document.getElementById("calculTempsdivmer"+countermercredi);
var tachedivmer = document.getElementById("tachedivmer"+countermercredi);
var prolieudivmmer = document.getElementById("prolieudivmmer"+countermercredi);
var protachemer = document.getElementById("protachemer"+countermercredi);
var prodescmer = document.getElementById("prodescmer"+countermercredi);
var clientmer = document.getElementById("clientmer"+countermercredi);
var nummer = document.getElementById("nummer"+countermercredi);
nummer.remove();
clientmer.remove();
prodescmer.remove();
protachemer.remove();
calculTempsdivmer.remove();
tachedivmer.remove();
prolieudivmmer.remove();
countermercredi = countermercredi - 1 ;
document.getElementById('nummer'+countermercredi).readOnly = false;
});
});