Javascript Jquery在<；中删除bg；td>；删除或保存元素后

问题：

类：name highlight hover，它应用于列成员的每个

td

，即使我没有编辑行

仅当td有

输入

或我正在编辑行时才应适用

从表1中的表2中删除名称后，应删除类名称突出显示悬停，此时不会发生任何情况

如果保存，则应删除类：名称高亮显示悬停

要测试：

单击表1中的“编辑”按钮

jsfiddle：

我认为问题在于：

 "drawCallback": function(settings) {

   setTimeout(function() {

     $('#example2 tr').draggable({
       drag: function(event) {

         var ctrl = $(document.elementsFromPoint(event.clientX, event.clientY)).filter('#example tr td:nth-child(2),input.border-highlight');

         $('.name-highlight-hover').removeClass('name-highlight-hover');
         if (ctrl.length > 0) {
           ctrl.addClass('name-highlight-hover animated  bounceIn');

         } else {
           ctrl.removeClass('name-highlight-hover');
         }

       }
     });

   })

 }

我的代码被截断了，请尝试JSFIDLE

$（文档）.ready（函数（）{
var dataUrl='1〕http://www.json-generator.com/api/json/get/ccTtqmPbkO?indent=2';
变量选项=[
{键：'选项1'，值：1}，
{键：'选项2'，值：2}，
{键：'选项3'，值：3}
];
var rowCache=[]；
函数mouseUp（事件）
{
var ctrl=$（document.elementsFromPoint（event.clientX，event.clientY））.filter（'input.border highlight'）；
如果（ctrl.length>0&&rowCache.length>0）
{console.log（ctrl）；
var el=rowCache[0]；
var data=el.row.data（）；
如果（data.length>0）
{
ctrl.val（数据[0].name）；
el.row.remove（）.draw（）；
}
}	
rowCache=[]；
$（“#示例tr td:n子（2）输入”）.removeClass（'border-highlight'）；
}
$（文档）.ready（函数（）{
var$table=$（“#示例”）；
var dataTable=null；
$（'body'）.mouseup（mouseup）；
$table.on（'mousedown'，'td.fa.fa减去平方'，函数（e）{
dataTable.row（$（this.closest（“tr”））.remove（）.draw（）；
});
$table.on（'mousedown.edit'，'i.fa.fa pencil square'，函数（e）{
启用行编辑（$（this））；
});
$table.on（'mousedown'，'input'，函数（e）{
e、 停止传播（）；
});
$table.on（'mousedown.save'，'i.fa.fa-envelope-o'，函数（e）{
updateRow（$（this），true）；//将保存按钮传递给函数。
});
$table.on（'mousedown'，'select basic'，函数（e）{
e、 停止传播（）；
});
dataTable=$table.dataTable({
ajax:dataUrl，
行重新排序：{
dataSrc:'命令'，
选择器：“tr”
},
栏目：[{
数据：“订单”
}, {
数据：“名称”
}, {
数据：“地点”
}, {
数据：“删除”
}]
});
$table.css（'border-bottom'，'none'）
.after（$（''）.addClass（'addRow'））
.append（$（''）.attr（'id'，'addRow'）.text（'addnewrow'））；
//添加行
$（'#addRow'）。单击（函数（）{
var$row=$（“#新行模板”）.find（'tr'）.clone（）；
dataTable.row.add（$row.draw（）；
//创建时切换编辑模式。
enableRowEdit（$table.find（'tbody tr:last child td i.fa.fa pencil square'）；
});
$（'#btn save'）。在（'单击'，函数（）上）{
updateRows（true）；//更新所有编辑的行
});
$（'#btn cancel'）。在（'click'，function（）上{
updateRows（false）；//还原所有编辑的行
});
功能启用行编辑（$editButton）{
$editButton.removeClass（）.addClass（“fa-信封-o”）；
var$row=$editButton.closest（“tr”）.off（“mousedown”）；
$row.find（“td”）.not（“：first”）.not（“：last”）.each（函数（i，el）{
enableEditText（$（此））
});
$row.find（'td:first'）。每个（函数（i，el）{
enableEditSelect（$（此））
});
}
函数enableEditText（$cell）{
var txt=$cell.text（）；
$cell.empty（）.append（$（“”{
键入：“文本”，
值：txt
}).data（'origing-text'，txt））；
}
函数enableEditSelect（$cell）{
var txt=$cell.text（）；
$cell.empty（）.append（$（“”{
类：“选择基本”
}).append（options.map）（函数（option）{
返回$（''）{
text:option.key，
值：option.value
})
})).data（'original-value'，txt））；
}
函数updateRows（提交）{
$table.find（'tbody tr td i.fa.fa-envelope-o'）。每个（函数（索引、按钮）{
updateRow（$（按钮），提交）；
});
}
函数updateRow（$saveButton，commit）{
$saveButton.removeClass（）.addClass（'fa-fa铅笔方块'）；
var$row=$saveButton.closest（“tr”）；
$row.find（'td'）。not（'：first'）。not（'：last'）。每个（函数（i，el）{
var$input=$（this.find（'input'）；
$（this）.text（提交？$input.val（）：$input.data（'original-text'）；
});
$row.find（'td:first'）。每个（函数（i，el）{
var$input=$（this.find（'select'）；
$（this）.text（提交？$input.val（）：$input.data（'original-value'）；
});
}
});
$（文档）.ready（函数（）{
var url='1〕http://www.json-generator.com/api/json/get/bXcKDeAbyq?indent=2';
表=$（'#示例2'）。数据表({
ajax:url，
订单：[[0，“描述”]，
行重新排序：{
dataSrc:'地点'，
选择器：“tr”
},
列：[{
数据：“名称”
}],
“drawCallback”：函数（设置）{
setTimeout（函数（）{
$（'example2 tr'）。可拖动({
拖动：函数（事件）{
var ctrl=$（document.elementsFromPoint（event.clientX，event.clientY））.filter（“#示例tr td:nth child（2），input.border highlight”）；
$（'.name highlight hover'）.removeClass（'name-highlight-hover'）；
如果（ctrl.length>0）{
ctrl.addClass（'name-highlight-hover'）；
}
}
});
})
}
});		
表.on（'mousedown'，'tbody tr'，function（）{
var$row=$（此）；
var=表行（函数（i，数据）{
return data.name==$row.children（）.first（）.text（）；
});
如果（r[0]。长度>0）
{
$row.parents（'table'）.find（'tr'）.removeClass（'highlight'）；
$row.addClass（'highlight'）；
$（'#示例tr td:nth child（2）input'）.addClass（'border-highlight'）；
}			
rowCache.push（{row:r}）；
});
});
});
div.addRow{
线高：45px；
背景色：#fff；
左侧填充：10px；
边框底部：1px实心；
边框顶部：1px实心#e5；}
突出显示{
背景色