<td ondblclick="editCell(this)" 如何在editCell中 用jquery动态创建select,select 有128个option,值分别是1-128, 并附加该td上,然后自动弹出让用户选择
时间: 2024-03-23 13:39:50 浏览: 20
好的,您可以尝试以下代码:
```
function editCell(cell) {
// 创建select元素
var select = $("<select></select>");
// 创建128个option元素并添加到select中
for (var i = 1; i <= 128; i++) {
var option = $("<option></option>").val(i).text(i);
select.append(option);
}
// 将select添加到td元素中
$(cell).empty().append(select);
// 自动弹出select让用户选择
select.focus();
}
```
这段代码会在双击单元格时调用`editCell`函数。函数会创建一个包含128个选项的下拉列表,并将其添加到传入的单元格中。然后,它会自动将焦点设置到下拉列表中,以便用户可以直接进行选择。
相关问题
<td id="tdWell" ondblclick="editCell(this)" 如何在editCell中 用jquery动态创建select,select 有128个option,值分别是1-128, 并附加该td(id=tdwell)上,然后自动弹出让用户选择
您可以按照以下步骤使用 jQuery 动态创建 select 并将其附加到 td 元素上,并在 td 元素上触发双击事件以弹出 select 选择框:
1. 在 editCell 函数中创建 select 元素和其对应的 option 元素:
```javascript
function editCell(td) {
// 创建 select 元素
var select = $("<select></select>");
// 创建 128 个 option 元素并添加到 select 中
for (var i = 1; i <= 128; i++) {
var option = $("<option></option>").val(i).text(i);
select.append(option);
}
// 将 select 元素附加到 td 元素上
$(td).append(select);
}
```
2. 修改 td 元素的 ondblclick 事件,使其调用 editCell 函数并阻止事件冒泡:
```html
<td id="tdWell" ondblclick="editCell(this); event.stopPropagation();"></td>
```
3. 在页面加载时,为 td 元素绑定一个单击事件,以使其在单击时防止事件冒泡:
```javascript
$(document).ready(function() {
// 为 td 元素绑定单击事件
$("#tdWell").click(function(event) {
event.stopPropagation();
});
});
```
这样,当用户双击 tdWell 元素时,就会弹出一个包含 128 个选项的 select 元素供其选择。
<td class=title data-i18n="xIDx202212082305XidX"> 姓名 </td> <TD class=input> <Input class="common wid" name=Name id=Name style="background:url(../common/images/guanliyuan-bg.png) no-repeat right center" onclick="return showCodeList('TollCollectorInfo',[this,CollectorID,DepartmentCode],[1,0,2],null,fm.ManageCom.value,'ManageCom',1);" ondblclick="return showCodeList('TollCollectorInfo',[this,CollectorID,DepartmentCode],[1,0,2],null,fm.ManageCom.value,'ManageCom',1);" onkeyup="return showCodeListKey('TollCollectorInfo',[this,CollectorID,DepartmentCode],[1,0,2],null,fm.ManageCom.value,'ManageCom',1);"> </TD>
这段代码是一个 HTML 表格中的一行,包含了一个“姓名”标签和一个文本输入框。文本输入框具有以下属性:
- class="common wid":指定了该元素的 CSS 样式类为 "common" 和 "wid"。
- name="Name":指定该元素的名称为 "Name",用于表单提交时作为数据的键名。
- id="Name":指定该元素的唯一标识符为 "Name"。
- style="background:url(../common/images/guanliyuan-bg.png) no-repeat right center":指定输入框的背景图片为 "../common/images/guanliyuan-bg.png",并将其重复显示在右边的中心位置。
- onclick、ondblclick、onkeyup:当用户单击、双击或按下键盘按键时,分别触发了三个 JavaScript 函数 showCodeList、showCodeListKey,这些函数的参数用于向服务器发送请求并获取数据进行显示。