mootools DOM节点添加、删除、改变顺序操作

最新推荐文章于 2021-07-21 09:39:41 发布

i_zane

最新推荐文章于 2021-07-21 09:39:41 发布

阅读量542

点赞数

分类专栏： mootools shopex

本文链接：https://blog.csdn.net/qq_39059866/article/details/90732248

版权

shopex 同时被 2 个专栏收录

4 篇文章

订阅专栏

mootools

3 篇文章

订阅专栏

本文介绍使用MooTools框架动态地在HTML表格中添加、删除行，并实现行的上下移动功能。通过实例代码展示了如何利用MooTools的Element方法创建新元素、注入到DOM树中，以及绑定事件处理函数来响应用户操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mootools 的写法与jq 是很不一样的。
下面的例子是在tbody 节点增加一行内容并且可以修改他们之间的顺序
文档链接： mootools的中文文档、mootools的英文文档

<!DOCTYPE html>
<html>
<head>
	<title>mootools</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script type="text/javascript" src="https://cdn.staticfile.org/mootools/1.6.0/mootools-core-compat.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<body>
	<a id="add" class="btn btn-primary">添加</a>
	<div class="table-responsive" id="table-content">
		<table  class="table table-striped">
			<thead>
				<tr>
					<td>#</td>
					<td>NAME</td>
					<td>MARK</td>
					<td>OPERATE</td>
				</tr>
			</thead>
			<tbody id="data">
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>测试1号</td>
					<td>
						<span class="del" style="cursor:pointer;">删除</span><code style="background: none">|</code>
						<span class="asc" style="cursor:pointer;">上移</span><code style="background: none">|</code>
						<span class="desc" style="cursor:pointer;">下移</span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script type="text/javascript">
		(function(){
			var n = $$('#data tr').length;
			var _div = $('table-content');
			$('add').addEvent('click', function(){
				var newRow = new Element('tr', {'class':'success','html':getTemp(++n)});
				newRow.inject($('data'));
				bindEditEvent(newRow); // 新增加的数据绑定事件
			});
			getTemp = function(v){
				return '<td>'+v+'</td><td>张三'+v+'</td><td>测试'+v+'号</td><td>\
						<span class="del" style="cursor:pointer;">删除</span><code style="background: none">|</code>\
						<span class="asc" style="cursor:pointer;">上移</span><code style="background: none">|</code>\
						<span class="desc" style="cursor:pointer;">下移</span></td>';
			}
			var bindEditEvent=function(row){
				var asc=row.getElement('span.asc');
				var desc=row.getElement('span.desc');
				var del=row.getElement('span.del');
				asc.addEvent('click',function(){
					var pre=row.getPrevious('tr');
					if(pre)row.injectBefore(pre);
				});
				desc.addEvent('click',function(){
					var next=row.getNext('tr');
					if(next)row.injectAfter(next);
				});
				del.addEvent('click',function(){
					if($$('#data tr').length<2) {alert('可选值不能为空，请至少留一条可选值');return;}
					if(confirm('删除不可恢复，确认删除本行吗？'))row.remove();
				});    
			};
			$$('#data tr').each(bindEditEvent); // 给初始数据绑定事件
		})();
	</script>
</body>
</html>

效果如图：
效果图
扩展：

创建新元素.
语法:
var myEl = new Element(element[, properties]);
参数:
element - (mixed)为要创建的元素或一个实际的DOM元素或CSS选择器的标签名称。
properties - (object, optional)设置元素属性。
返回:
(element)一个新的MooTools扩展后的HTML元素。
示例:
// Creating an new anchor with an Object
var myAnchor = new Element('a', {
    href: 'http://mootools.net',
    'class': 'myClass',
    html: 'Click me!',
    styles: {
        display: 'block',
        border: '1px solid black'
    },
    events: {
        click: function(){
            alert('clicked');
        },
        mouseover: function(){
            alert('mouseovered');
        }
    }
});
 
// Using Selectors
var myNewElement = new Element('a.myClass');
注意:
因为元素名称解析为一个CSS选择器，所以冒号必须转义。因此，new Element('fb\:name)成为<fb:name>。