כתבתי מחלקה קטנה ב-JS שמתעסקת עם אלמנטים: מזיזה אותם מעלה\מטה, מוסיפה אלמנט לרשימה ומוחקת אלמנט(ים).

בנוסף יש אפשרות להסתנכרן עם טבלה חיצונית שתהיה מושפעת מהפעולות על הטבלה המקורית.

הקוד עובד בדפדפנים הגדולים (הפעילות נבדקה ונמצאה תקינה ב-IE6, FF3, Opera9), והותאם לתקן XHTML Strict 1.0.

קובץ שימחיש לכם את הפעולה של המחלקה:
https://2008-uploaded.fresh.co.il/2...5/68260771.html

הנה הקוד של המחלקה:

קוד:

function nodes_handler(table_id, syn_id)
{
	nodes_handler_OBJ = this;	// Set global scope

	this.tObj = fid(table_id);		// The main table object
	this.attr = new Array();		// Storing here some features
	
	if (syn_id)
		this.attr['synchronize'] = syn_id;

	this.init = function()
	{
		this.register(this.tObj);

		if (this.attr['synchronize'])
			this.attr['syn_register']();
	}

	// Register actions on nodes
	this.register = function(parent_node)
	{
		var nodes = parent_node.getElementsByTagName('td');
		var i;

		for (i in nodes)
		{
			var nodes_class_name = this.attr['class_prefix'] ? this.attr['class_prefix']+nodes[i].className : nodes[i].className;

			switch(nodes_class_name)
			{
				case 'delete': nodes[i].onclick = function() { nodes_handler_OBJ.remove(this) };
					break;
				case 'up': nodes[i].onclick = function() { nodes_handler_OBJ.shift(this, 'up'); };
					break;
				case 'down': nodes[i].onclick = function() { nodes_handler_OBJ.shift(this, 'down'); };
					break;
				default:;	// Do nothing
			}
		}
	}
	
	this.remove = function(deleteObj)
	{
		var trObj = this.getTR(deleteObj);

		this.tObj.deleteRow(trObj.sectionRowIndex);

		if (this.attr['synchronize'])
			this.synchronize_delete();
	}
	
	this.shift = function(obj, dir)
	{
		var trObj = this.getTR(obj);

		switch(dir)
		{
			case 'up': if (trObj.sectionRowIndex < 1) return false;
					var new_idx = trObj.sectionRowIndex-1;
				break;
			case 'down': if (trObj.sectionRowIndex > (this.tObj.rows.length-2)) return false;
					var new_idx = trObj.sectionRowIndex+2;
				break;
			default:;
		}

		if (this.attr['synchronize'])
			this.synchronize_shift(trObj.sectionRowIndex, dir);

		var trBuff = this.tObj.tBodies[0].insertRow(new_idx);

		this.tObj.tBodies[0].replaceChild(trObj,trBuff);

		return true;
	}

	// Finds the current row.
	this.getTR = function(oObj)
	{
		for ( ; oObj.parentNode.id != this.tObj.id; oObj=oObj.parentNode)
		{
			switch (oObj.parentNode.tagName.toLowerCase())
			{
				case 'tbody':
				case 'thead':
				case 'tfoot':
					if (oObj.parentNode.parentNode.id == this.tObj.id)
					{	return oObj;	}
					break;
				default:;
			}
		}

		return oObj;
	}

	this.add_row = function()
	{
		var newTR = this.tObj.insertRow(this.tObj.rows.length);

		// innerHTML doesn't work with a <tr> object in IE, so we'll create a cell and use innerHTML on it
		var newCell = newTR.insertCell(0);

		newCell.innerHTML = this.attr['row_innerHTML'];	// this.attr['row_innerHTML'] has the data of a new row's innerHTML (The HTML between the <tr> tags)

		this.register(newTR);

		if (this.attr['synchronize'])
		{
			this.synchronize_add();
			this.attr['syn_register'](newTR);
		}
	}

	if (this.attr['synchronize'])	// If it's false, we don't need to load these functions
	{
		this.syn = fid(this.attr['synchronize']);

		this.synchronize_shift = function(current_idx, dir)
		{
			var trObj = this.syn.rows[current_idx];

			switch(dir)
			{
				case 'up': var new_idx = current_idx-1;
					break;
				case 'down': var new_idx = current_idx+2;
					break;
				default:;
			}

			var trBuff = this.syn.tBodies[0].insertRow(new_idx);

			this.syn.tBodies[0].replaceChild(trObj,trBuff);

			return true;
		}

		this.synchronize_add = function()
		{
			var newTR = this.syn.insertRow(this.syn.rows.length);
			
			var newCell = newTR.insertCell(0);

			newCell.innerHTML = this.attr['syn_row_innerHTML'];
		}
		
		this.synchronize_delete = function(current_idx)
		{
			this.syn.deleteRow(current_idx);
		}
	}
}

שימו לב שהשתמשתי במאפיין class לזיהוי תפקיד כל אלמנט. אם תמצאו מאפיין שימושי אחר (במקום ב-class, שהוא לא הכי עדיף במקרה שאנחנו רוצים להשתמש ב-class אחר עבור האלמנט), בבקשה הודיעו.

יכול להיות שאולי אצלכם הקוד ייראה מבולגן בגלל שהשתמשתי בעורך Notepad++ והוא מתרגם את ההזחות (Tab'ים) בגודל שונה.

שימוש מהנה (לא סמים, כן? ),
דור.