Форум

mgramin · #1 (**permalink**) 27.06.2011, 11:48

Здравствуйте, у меня возник вопрос по Jquery следующего характера:
1. Мне необходимо реализовать Drug and Drop безликой таблицы. Для этого я воспользовался плагином который взял вот здесь: http://www.isocra.com/2008/02/table-...jquery-plugin/. Все вроде бы получилось, да только вот в чем проблема: Как мне потом все это за submitить ведь Id то нет. Заранее спасибо. Вот код который у меня получился:

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.tablednd_0_5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
       $("table").tableDnD();
  $('table').tableDnD({
        onDrop: function(table, row) {
            alert($('table').tableDnDSerialize());			
        },
        dragHandle: "dragHandle"
    });

});
</script>
<table cellspacing="0" cellpadding="2">
    <tr><td>1</td><td>One</td><td>some text</td></tr>
    <tr><td>2</td><td>Two</td><td>some text</td></tr>
    <tr><td>3</td><td>Three</td><td>some text</td></tr>
    <tr><td>4</td><td>Four</td><td>some text</td></tr>
    <tr><td>5</td><td>Five</td><td>some text</td></tr>
    <tr><td>6</td><td>Six</td><td>some text</td></tr>
</table>

mgramin · #2 (**permalink**) 28.06.2011, 08:41

Как решение данной проблемы, можно проставить id для tr, а взять их можно из первой ячейки каждой строки.

nikita.mmf · #3 (**permalink**) 28.06.2011, 13:49

Написать свой serialize для таблицы

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
	<div align="center">
	
	<table id="myTable" width="480" border="2">
		<tr>
			<td>1</td>
			<td>11</td>
			<td>21</td>
		</tr>
		<tr>
			<td>2</td>
			<td>12</td>
			<td>22</td>
		</tr>
		<tr>
			<td>3</td>
			<td>13</td>
			<td>23</td>
		</tr>
		<tr>
			<td>4</td>
			<td>14</td>
			<td>24</td>
		</tr>
		<tr>
			<td>5</td>
			<td>15</td>
			<td>25</td>
		</tr>
	</table>
	</div>
	<script type="text/javascript">
		$.serializeTable = function ( tblElem, colName ) {
			var $td = $("td", tblElem);
			var len = 0;
			if( $td.length ) {
				len = $td.eq(0).parent().children( "td" ).length;
			}
			return $td.map(function( index ){
				return colName[ index % len ] + "=" + decodeURIComponent( $(this).text() )
			}).get().join("&")
		}
		alert( $.serializeTable( document.getElementById("meTable") , ["name1[]", "name2[]", "name3[]"] ) ); 
	</script>
</body>
</html>

mgramin · #4 (**permalink**) 28.06.2011, 16:04

Спасибо большое класное решение проблемы, я реализовал чуть по другому.

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.tablednd_0_5.js"></script>
<style type="text/css">
<!--
.letter {background-color: #a0d6fb;}
-->
</style>
<script type="text/javascript">
$(document).ready(function() {
$('table').attr('id','id_for_table');
var id_for_tr = 1;  
$("#id_for_table tr").each(function(indx){
$(this).attr('id',id_for_tr);
id_for_tr = id_for_tr + 1;
  });
       $("#id_for_table").tableDnD();
  $('#id_for_table').tableDnD({
		onDragClass: "letter",
        onDrop: function(table, row) {
		    alert($('#id_for_table').tableDnDSerialize(''));
        },
        dragHandle: "dragHandle"
    });

});
</script>
<body>
<form>
<table cellspacing="0" cellpadding="2">
    <tr><td>1</td><td>One</td><td>some text</td></tr>
    <tr><td>2</td><td>Two</td><td>some text</td></tr>
    <tr><td>3</td><td>Three</td><td>some text</td></tr>
    <tr><td>4</td><td>Four</td><td>some text</td></tr>
    <tr><td>5</td><td>Five</td><td>some text</td></tr>
    <tr><td>6</td><td>Six</td><td>some text</td></tr>
</table>
</form>

mgramin · #5 (**permalink**) 28.06.2011, 16:05

Вот мне еще один вопрос интересен как жестко подменить BGCOLOR ячейки ну и конечно CSS

Форум

Справочник

Discord чат

Курсы javascript