使用具有相同ID的多个文本字段的Jquery函数
Using Jquery functions with Multiple Text Fields With Same ID
我正在寻找如何使用javascript生成的jquery引用特定文本字段的帮助。
我得到的仅适用于字段引用的第一个实例。
HTML代码:
Record ID<input type="text" name="ri[]" id="ri1" size="7" style="font-size:0.9em;">
Qty Per Box<input type="text" name="qpb[]" id="qpb1" size="7" style="font-size:0.9em;">
Javascript用于生成更多类似的行
<!--Dynamically Create New Rows For Data Entry-->
<script language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true === chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
因此,我最终得到的是具有相同id/name的多行。我只想验证keyup上的输入,所以我决定使用(this).val方法,但它只适用于第一行。
<script>
$(document).ready(function() {
$("#ri1").keyup(function() {
$(this).val($(this).val().replace(/[^'d]/g, ""));
});
});
</script>
有人知道在以这种方式生成多行输入字段时验证输入的更好解决方案吗?
Js小提琴http://jsfiddle.net/nS2LM/22/
不建议多次使用ID,但如果您使用的是最新的jQuery,那么事件委派就是您的答案:
<input type="text" name="ri[1]" id="ri1" size="7" style="font-size:0.9em;" class="do_stuff">
<input type="text" name="ri[2]" id="ri2" size="7" style="font-size:0.9em;" class="do_stuff">
<script>
$(document).ready(function() {
$('body').on('keyup', '.do_stuff', function() {
$(this).val($(this).val().replace(/[^'d]/g, ""));
});
});
</script>
上面的代码将keyup绑定到主体的子元素.do_stuff,因此任何动态创建的类为.do_stuf的元素都将被keyup事件捕获。
相关文章:
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 当设置addFromAutocompleteOnly时,剩余文本将保留在输入字段中
- 使用jquery将输入字段转换为文本
- 如何从查询字符串中的输入字段发回文本
- 表单输入字段随着溢出的文本而增长
- 使用单个文本框向多个字段添加严格搜索
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- 使用jQuery的输入字段文本换行
- 向使用jQuery加载DOM后添加的字段添加不受限制的文本输入DatePickers
- 当用户单击按钮(在光标位置)时,在输入字段中添加一个文本字符串
- 如何根据文本长度立即显示和隐藏字段?-JQuery
- 如何使文本、数字和日期html输入字段以一致的方式支持Ctrl+Z(撤消)
- 模拟文本输入字段上的退格键
- 输入字段中的可持续文本
- 未获取文本输入字段的值
- 没有文本安全性的密码字段
- 将禁用的输出字段更改为带前缀的文本
- 为什么 react 将输入[类型=“文本”] 字段设为只读,除非我提供 onChange 回调
- 使用SAPUI5中的“文本”字段显示正确的“日期”
- Kendo,如何将MVVM文本:字段绑定到远程DataSource