如何使滑动功能在表格行上动态工作
How to make swipe function work dynamically on a table row?
我正在使用Cordova开发一个跨平台的移动应用程序。我有一个带有表格的 HTML 页面。我有一个按钮add row
单击时会向我的表格添加新行。我需要类似iOS的滑动操作才能执行删除操作。我使用touchstart
事件来滑动表中的静态行。这工作正常,但不适用于动态创建的表行。如何执行此滑动操作?
这是我到目前为止的代码:
.HTML
<div class="fortable">
<table id="cashreg">
<tr>
<td class="tablecellbackground"><div class="del" id="d1" ><p>Delete</p></div><div id="cells" class="cells"><div class="denom"><p>Start Time</p></div><div class="cnt"><p>Select Item</p></div><div class="tots"><p>Employee</p></div><div class="tots1"><p>Price</p></div></div></td>
</tr>
</table>
<input type="button" class="addmore">
</div>
JavaScript
要向表中添加行:
$(".addmore").click(function(){
var rows = $("#cashreg tr").length+1;
$("#cashreg").append('<tr><td class="tablecellbackground"><div class="cells"><div class="denom"><p>Start Time</p></div><div class="cnt"><p>Select Item</p></div><div class="tots"><p>Employee</p></div><div class="tots1"><p>Price</p></div><div class="del"><p>Delete</p></div></div></td></tr>');
});
对于类似 iOS 的滑动:
window.addEventListener('load', function(){
var el = document.getElementsByClassName('cells')[0];
ontouch(el, function(evt, dir, phase, swipetype, distance){
var touchreport = ''
touchreport += '<b>Dir:</b> ' + dir + '<br />'
touchreport += '<b>Phase:</b> ' + phase + '<br />'
touchreport += '<b>Swipe Type:</b> ' + swipetype + '<br />'
touchreport += '<b>Distance:</b> ' + distance + '<br />'
if(dir=="left"){
left=parseInt(($(".cells").css("top")).replace ( /[^'d.]/g, '' ))-distance;
$(".cells").css("left","-"+left+"px")
}
if(dir=="right"){
if($(".cells").css("left")== "-166px"){
//left=parseInt(($(".cells").css("top")).replace ( /[^'d.]/g, '' ))-distance;
$(".cells").css("left","0px")
}
}
if(dir=="none"){
// document.getElementById("hi").value=el.pageX;
}
})
}, false)
function ontouch(el, callback){
var touchsurface = el,
dir,
swipeType,
startX,
startY,
distX,
distY,
threshold = 50, //required min distance traveled to be considered swipe
restraint = 100, // maximum distance allowed at the same time in perpendicular direction
allowedTime = 500, // maximum time allowed to travel that distance
elapsedTime,
startTime,
handletouch = callback || function(evt, dir, phase, swipetype, distance){}
touchsurface.addEventListener('touchstart', function(e){
var touchobj = e.changedTouches[0]
dir = 'none'
swipeType = 'none'
dist = 0
startX = touchobj.pageX
startY = touchobj.pageY
startTime = new Date().getTime() // record time when finger first makes contact with surface
handletouch(e, 'none', 'start', swipeType, 0) // fire callback function with params dir="none", phase="start", swipetype="none" etc
e.preventDefault()
}, false)
touchsurface.addEventListener('touchmove', function(e){
var touchobj = e.changedTouches[0]
distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
if (Math.abs(distX) > Math.abs(distY)){ // if distance traveled horizontally is greater than vertically, consider this a horizontal movement
dir = (distX < 0)? 'left' : 'right'
handletouch(e, dir, 'move', swipeType, distX) // fire callback function with params dir="left|right", phase="move", swipetype="none" etc
}
else{ // else consider this a vertical movement
dir = (distY < 0)? 'up' : 'down'
handletouch(e, dir, 'move', swipeType, distY) // fire callback function with params dir="up|down", phase="move", swipetype="none" etc
}
e.preventDefault()
// prevent scrolling when inside DIV
}, false)
touchsurface.addEventListener('touchend', function(e){
var touchobj = e.changedTouches[0]
distX = touchobj.pageX - startX
elapsedTime = new Date().getTime() - startTime // get time elapsed
if (elapsedTime <= allowedTime){ // first condition for awipe met
if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
swipeType = dir // set swipeType to either "left" or "right"
}
else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met
swipeType = dir // set swipeType to either "top" or "down"
}
}
// Fire callback function with params dir="left|right|up|down", phase="end", swipetype=dir etc:
handletouch(e, dir, 'end', swipeType, (dir =='left' || dir =='right')? distX : distY)
e.preventDefault()
if(dir=="left"){
if(distX>-100){
$(".cells").css("left","0px")
}
else if(distX<-50 && distX>-100){
$(".cells").css("left","-166px")
}
else{
$(".cells").css("left","-166px")
}
}
}, false)
}
如何使此滑动应用于新添加的表格行?
你应该使用 eventdelegate on(( 来处理 js 动态添加的新元素:
$("body").on('touchstart click','#cashreg tr', function(e){
})
希望这有帮助。
问题是您将 cell 元素与 load
函数中的事件ontouch
绑定。这意味着只有加载时存在的元素将被绑定。您还需要在新创建的行元素上注册 ontouch
事件。
通过您的示例,您可以尝试直接使用 ontouch
html 属性,即:
<div class="cells" ontouchstart="...">
或者只需将 touch 事件绑定到您的身体并检查处理程序中的 cells
类:
var el = document.getElementsByTagName('body')[0];
ontouch(el, function(evt, dir, phase, swipetype, distance){
if($(evt.target).hasClass("cells")){
// your code
}
});
相关文章:
- AngularJS ng开关或类似的动态值工作
- 点击功能没有'ajax调用动态元素(Backbone)后无法工作
- 如何使Jquery编码的动态下拉菜单与PHP GET变量协调工作
- 第一次点击动态创建的表后,点击不工作
- 动态添加哈希标记;t工作
- 动态潜水高度jQuery.Load()不工作
- 为什么动态加载的事件在我的代码中不能正常工作
- 在Alfresco中动态创建空间/文件夹的Javascript;t工作正确
- 为不在javascript中工作的动态创建类设置属性
- CSS没有'使用javascript向页面动态添加元素时无法工作
- javascript动态生成的带有onclick事件的表无法正常工作
- html-javascript不能在动态生成的html表单中工作
- JavaScript选项卡动态宽度.animate()只能工作一次
- (谷歌API)单元格引用中的动态工作表和工作表创建脚本的名称
- 如何使滑动功能在表格行上动态工作
- 文件上传 Jquery 不能动态工作
- 如何通过element.append使ui sref动态工作
- 如何让常量变量在JavaScript代码中动态工作
- 悬停函数不为每个条目动态工作
- Android WebView getElementById('math')不能动态工作