代码之家 › 专栏 › 技术社区 › SAM

如何分别在正文和正文内的表格上附加单击事件

html jquery javascript

SAM · 技术社区 · 9 年前

我的HTML是:

<body id="bodyMain">
<table id="myTable" class="table-bordered">
<thead>
    <tr>
        <td>UserId</td>
        <td>UserName</td>
        <td>FirstName</td>
        <td>LastName</td>
        <td>PhoneNumber</td>
        <td>Address</td>
        <td>Email Id</td>
        <td>UserType</td>
    </tr>
</thead>
<tbody></tbody>
</table>

我有一个与表myTable关联的click事件。它使表格单元可编辑。现在,我需要在整个正文中附加一个事件,检查单击的区域是否为表,然后使用表单击创建的文本框将消失,单元格值将取而代之。js代码是

var globalFlag = '';
var prevValue;
var prevHandle = null;

$('#myTable').on('click', 'tbody tr td', function (e) {    
debugger;
console.log($(this).text());
var rowIndex = $(this).parent('tr').index();
var colIndex = $(this).index();
var index = '' + rowIndex + ',' + colIndex;
console.log(index);
if (globalFlag != index && colIndex != 0) {
    //remove initially created textbox
    if (prevHandle != null) {
        prevHandle.find('input[type="text"]').remove();
        prevHandle.text(prevValue);
    }
    prevHandle = $(this);
    prevValue = $(this).text();
    globalFlag = index;
    var valuepresent = $(this).text();
    var txtsize = parseInt($(this).width());
    console.log(txtsize);
    var txt = "<input type='text' value='" + $(this).text() + 
   "'style='width:" + txtsize + "px'>";
    $(this).text('');
    $(this).append(txt);
}
});
$('body').on("click", function () {
debugger;
var th = $(this).attr('id');
var tb = $('#myTable');
if (th != null || th != undefined)
    if (th.indexOf("myTable") >= 0)
        return;
if (prevHandle != null) {
    prevHandle.find('input[type="text"]').remove();
    prevHandle.text(prevValue);
}
});

无论如何,我试着把这两个事件一个接一个地称为。我需要的是,如果点击区域不是表,然后禁用编辑单元格数据。

$('body >:not(#myTable)').on("click", function () {

1 回复 | 直到 7 年前

fdomn-m 9 年前

问题是,单击事件将从第一个(表单元格)处理程序“冒泡”到主体处理程序。

return false;

在表格单元格的末尾,单击事件处理程序。

event.stopPropagation : https://api.jquery.com/event.stoppropagation/

顺便说一句,你可以让你的“亲密”处理程序更容易。假设表格单元格上显示的唯一输入是内联编辑,则可以使用 :visible 选择器以查找输入,例如将删除更改为:

var inp = $("#myTable input[type='text']:visible");
inp.closest("td").text(inp.val());
inp.remove();

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前