moving a table row to another - jquery

  • (2 Pages)
  • +
  • 1
  • 2

18 Replies - 5130 Views - Last Post: 03 March 2013 - 03:50 PM

#1 haris244808  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 03-March 13

moving a table row to another - jquery

Posted 03 March 2013 - 12:24 PM

I have
<!-- Table -->
					<div class="table1">
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<th width="13"><input type="checkbox" class="checkbox" /></th>
								<th>Case Nr</th>
								<th>Subject</th>
								<th>Description</th>
								<th>Created_By</th>
								<th>Created_On</th>
								<th>Came_From</th>
								<th>Remarks</th>
								<th class="ac">Actions</th>
							</tr>
							<tr>
								<td><input type="checkbox" class="checkbox" /></td>
								<td>342Y4-T45</td>
								<td><a href="#">Curriculum Decision</a></td>
								<td>Lorem ipsum dolor sit amet, consectetur.</td>
								<td><a href="#">Administrator</a></td>
								<td title="time: 22:30:34">12.34.2012</a></td>
								<td><a href="#">Guest</a></td>
								<td>NULL</td>
								<td><a href="#" class="ico accept" onclick="accept();">Accept</a><a href="#" class="ico reject">Reject</a></td>
							</tr>
							<tr>
								<td><input type="checkbox" class="checkbox" /></td>
								<td>342Y4-T452</td>
								<td><a href="#">Curriculum Decision</a></td>
								<td>Lorem ipsum dolor sit amet, consectetur.</td>
								<td><a href="#">Administrator</a></td>
								<td title="time: 22:30:34">12.34.2012</a></td>
								<td><a href="#">Guest</a></td>
								<td>NULL</td>
								<td><a href="#" class="ico accept" onclick="accept();">Accept</a><a href="#" class="ico reject">Reject</a></td>
							</tr>
							<tr>
								<td><input type="checkbox" class="checkbox" /></td>
								<td>342Y4-T453</td>
								<td><a href="#">Curriculum Decision</a></td>
								<td>Lorem ipsum dolor sit amet, consectetur.</td>
								<td><a href="#">Administrator</a></td>
								<td title="time: 22:30:34">12.34.2012</a></td>
								<td><a href="#">Guest</a></td>
								<td>NULL</td>
								<td><a href="#" class="ico accept" onclick="accept();">Accept</a><a href="#" class="ico reject">Reject</a></td>
							</tr>
						</table>
						
						
						<!-- Pagging -->
						<div class="pagging">
							<div class="left">Showing 1-12 of 44</div>
							<div class="right">
								<a href="#">Previous</a>
								<a href="#">1</a>
								<a href="#">2</a>
								<a href="#">3</a>
								<a href="#">4</a>
								<a href="#">245</a>
								<span>...</span>
								<a href="#">Next</a>
								<a href="#">View all</a>
							</div>
						</div>
						<!-- End Pagging -->


and when i press accept link i want to move that row to another same table as #table1 but with the id#table two and instead of accept and reject links to show another links... (note that first <tr> should be skipped because its a table header)

I tried smth like this:
<script type="text/javascript">
		function accept(){
			$(".table1 tr").eq(1).insertAfter($(".table2 tr"));
		}

	</script>


The first <tr> moves ok. but when i press to move the second row it moves it. but i show it two times...

Can anyone helo me to achieve what i want???

Is This A Good Question/Topic? 0
  • +

Replies To: moving a table row to another - jquery

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3354
  • View blog
  • Posts: 11,361
  • Joined: 12-December 12

Re: moving a table row to another - jquery

Posted 03 March 2013 - 12:32 PM

You talk about ids #table1 and #table2 but your code refers to class-names .table1 and .table2. Is 'table2' a class-name or an id? These should really be ids (using the hash-sign # within your jQuery selector(s)).
Was This Post Helpful? 0
  • +
  • -

#3 haris244808  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 03-March 13

Re: moving a table row to another - jquery

Posted 03 March 2013 - 01:22 PM

View Postandrewsw, on 03 March 2013 - 12:32 PM, said:

You talk about ids #table1 and #table2 but your code refers to class-names .table1 and .table2. Is 'table2' a class-name or an id? These should really be ids (using the hash-sign # within your jQuery selector(s)).


srry my mistake
they are Classes table 2 is also a class
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3354
  • View blog
  • Posts: 11,361
  • Joined: 12-December 12

Re: moving a table row to another - jquery

Posted 03 March 2013 - 01:26 PM

You are missing a closing DIV tag, according to your posted code. Fix this first.

This post has been edited by andrewsw: 03 March 2013 - 01:27 PM

Was This Post Helpful? 0
  • +
  • -

#5 haris244808  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 03-March 13

Re: moving a table row to another - jquery

Posted 03 March 2013 - 01:31 PM

View Postandrewsw, on 03 March 2013 - 01:26 PM, said:

You are missing a closing DIV tag, according to your posted code. Fix this first.


cmon man maybe i forgot to add some divs or smth else... skip them
What it really matters here is jQuery code... just see my question and try to answer with Script of jquery

again: I want from .table1 to move to .table2 the rows which are triggered (note that every row has an <a href=""> Accept</a> link, so when Accept is pressed that row should move to the second table, but skiping first <tr> because i putted the header of table to the first row)
And when it moves to the 2nd table the accept link will be removed and insted will come some other links, like: edit, delete ...

Thnx for the fast reply btw :)
Was This Post Helpful? 1
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3354
  • View blog
  • Posts: 11,361
  • Joined: 12-December 12

Re: moving a table row to another - jquery

Posted 03 March 2013 - 01:40 PM

Try this (using last()):

<script type="text/javascript">
		function accept(){
			$(".table1 tr").eq(1).insertAfter($(".table2 tr").last());
		}

	</script>

It's odd that your code duplicates the row though..

..well I suppose, technically, you were originally asking it to insert the row after each row in the second table. In Javascript it would just end up positioned after the last row (as I recall) but with jQuery it ends up duplicating (cloning) the row. But, in reality, you should only ask to insert it after a specific row (rather than after all of them).

This post has been edited by andrewsw: 03 March 2013 - 01:36 PM

Was This Post Helpful? 1
  • +
  • -

#7 haris244808  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 03-March 13

Re: moving a table row to another - jquery

Posted 03 March 2013 - 01:40 PM

View Postandrewsw, on 03 March 2013 - 01:36 PM, said:

Try this (using last()):

<script type="text/javascript">
		function accept(){
			$(".table1 tr").eq(1).insertAfter($(".table2 tr").last());
		}

	</script>

It's odd that your code duplicates the row though..


Thank you so much man,that did the trick.
Now do u now how to make the accept link dissaapear and instead show other links (options)?
Was This Post Helpful? -1
  • +
  • -

#8 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3354
  • View blog
  • Posts: 11,361
  • Joined: 12-December 12

Re: moving a table row to another - jquery

Posted 03 March 2013 - 01:42 PM

Quote

cmon man maybe i forgot to add some divs or smth else... skip them
What it really matters here is jQuery code... just see my question and try to answer with Script of jquery

This is rude and I meant to mark your post down. If the HTML is malformed then it is unreasonable to expect that the row will be positioned correctly.
Was This Post Helpful? 0
  • +
  • -

#9 haris244808  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 03-March 13

Re: moving a table row to another - jquery

Posted 03 March 2013 - 01:47 PM

View Postharis244808, on 03 March 2013 - 01:40 PM, said:

View Postandrewsw, on 03 March 2013 - 01:36 PM, said:

Try this (using last()):

<script type="text/javascript">
		function accept(){
			$(".table1 tr").eq(1).insertAfter($(".table2 tr").last());
		}

	</script>

It's odd that your code duplicates the row though..


Thank you so much man,that did the trick.
Now do u now how to make the accept link dissaapear and instead show other links (options)?


and actualy i want that when another row is moved... to move to the top of the table (like in DECREASING order)...
and is it possible to save them in 2nd table even when the page is refreshed??

Too many questions i know... if u have time just please to answer as much as u can

u rock man :)

View Postandrewsw, on 03 March 2013 - 01:42 PM, said:

Quote

cmon man maybe i forgot to add some divs or smth else... skip them
What it really matters here is jQuery code... just see my question and try to answer with Script of jquery

This is rude and I meant to mark your post down. If the HTML is malformed then it is unreasonable to expect that the row will be positioned correctly.


i meant that here i have the divs OK but when i posted the question i forgot maybe a div...dont misunderstand
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3354
  • View blog
  • Posts: 11,361
  • Joined: 12-December 12

Re: moving a table row to another - jquery

Posted 03 March 2013 - 01:56 PM

Try:

<script type="text/javascript">
		function accept(){
			$(".table1 tr").eq(1).insertBefore($(".table2 tr").first());
		}

	</script>

Do you want to save the details (semi) permanently? Or just during a page refresh?

You could create a cookie, or investigate localStorage to store some information. Permanent storage would require a server-side script.
Was This Post Helpful? 1
  • +
  • -

#11 haris244808  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 03-March 13

Re: moving a table row to another - jquery

Posted 03 March 2013 - 01:56 PM

and i just entered the forum... where i can edit the post??
Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3354
  • View blog
  • Posts: 11,361
  • Joined: 12-December 12

Re: moving a table row to another - jquery

Posted 03 March 2013 - 02:00 PM

It is possible to add information to the page's url:

parent.location.hash = "hello";

but this is a bit flakey.
Was This Post Helpful? 0
  • +
  • -

#13 haris244808  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 03-March 13

Re: moving a table row to another - jquery

Posted 03 March 2013 - 02:01 PM

View Postandrewsw, on 03 March 2013 - 01:56 PM, said:

Try:

<script type="text/javascript">
		function accept(){
			$(".table1 tr").eq(1).insertBefore($(".table2 tr").first());
		}

	</script>

Do you want to save the details (semi) permanently? Or just during a page refresh?

You could create a cookie, or investigate localStorage to store some information. Permanent storage would require a server-side script.


yes i want to store them permanently :S
Was This Post Helpful? 0
  • +
  • -

#14 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3354
  • View blog
  • Posts: 11,361
  • Joined: 12-December 12

Re: moving a table row to another - jquery

Posted 03 March 2013 - 02:04 PM

View Postharis244808, on 03 March 2013 - 01:56 PM, said:

and i just entered the forum... where i can edit the post??

You can't edit until you've made a certain number of posts - can't remember the number.

View Postharis244808, on 03 March 2013 - 02:01 PM, said:

yes i want to store them permanently :S

This requires server-side scripting using a language such as PHP and, usually, a database.
Was This Post Helpful? 0
  • +
  • -

#15 haris244808  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 03-March 13

Re: moving a table row to another - jquery

Posted 03 March 2013 - 02:09 PM

View Postandrewsw, on 03 March 2013 - 02:04 PM, said:

View Postharis244808, on 03 March 2013 - 01:56 PM, said:

and i just entered the forum... where i can edit the post??

You can't edit until you've made a certain number of posts - can't remember the number.

View Postharis244808, on 03 March 2013 - 02:01 PM, said:

yes i want to store them permanently :S

This requires server-side scripting using a language such as PHP and, usually, a database.


yes im using php.. what i plan to do is:
i have some infos in Database and i will show them through looping in the 1st table...
Then when the accept link of specific row is clicked. that row will move to the 2nd table, hide accept link and show others...
But even if the user has refreshed the page or if he/she signs out, the moved infos must stay that..>

Srry for bothering with too many questions...but i am not good in jQuery and trying to learn :)
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2