Jump to content
funbinod

moving through elements

Recommended Posts

hello all

i am trying to use 'keydown' function to move through html rows. but i could not succeed.

here is what i tried--

	$("body").on("keyup", function(e) {
		if ($("#mid").find(".maintable tr[data-selected='Y']").length == 0) {
			$("#mid").find(".maintable tr").first().data("selected", 'Y').addClass("thisrow");
		} else {
			if (e.which === 40) {
				$("#mid").find(".maintable tr[data-selected='Y']").next().data("selected", 'Y').addClass("thisrow");
				$("#mid").find(".maintable tr[data-selected='Y']").first().data("selected", 'N').removeClass("thisrow");
			} else if (e.which === 38) {
				$("#mid").find(".maintable tr[data-selected='Y']").prev().data("selected", 'Y').addClass("thisrow");
				$("#mid").find(".maintable tr[data-selected='Y']").last().data("selected", 'N').removeClass("thisrow");
			}
		}
	})

in the above code, '#mid' is a div that holds data retrieved from jQuery.ajax function.

below is the backend code data from which is attached to the '#mid' div.

		$data = "<table class='maintable'>";
		$sn = 0;
		while ($r = $q->fetch_object()) {
			$sn++;
			$name = $r->name;
			$aid = $r->aid;
			$ac_id = $r->ac_id;
			$ob = $r->ob;
			$data .= "
			<tr data-target='acregister.php?aid=$aid&m=e' data-selected='N'>
				<td>$name</td>
				<td style='width: 150px;'>$ac_id</td>
				<td style='width: 150px;'>$ob</td>
			</tr>";
		}
		$data .= "</table>";
		
		echo $data;

here i want to use up and down arrows to move through the rows retrieved from ajax function. on the rows i've attached 'data-selected' value to know which row is selected. and on each keydown function i want change the 'data-selected' value of next row to 'Y' and change its value to 'N' for the previous one.

the above code worked only once. it changed the value for new row but didnot change the value for the previous one and hence when i press down arrow, it selects first row but does not move to next row on another down arrow press.

please guide me, what i missed?

Edited by funbinod

Share this post


Link to post
Share on other sites

It looks like you have a condition where you're trying to do everything real-time and getting messed up because you're changing things as you go.  Find the current selected row and save that as a variable.  Find the row to be selected and save that as a variable.  Then work with those variables instead of using CSS selectors to always find the things you're looking for in the data set that you're actively changing.

Also, I assume you mean "keyup."

Share this post


Link to post
Share on other sites
On 9/24/2019 at 10:37 PM, justsomeguy said:

It looks like you have a condition where you're trying to do everything real-time and getting messed up because you're changing things as you go.  Find the current selected row and save that as a variable.  Find the row to be selected and save that as a variable.  Then work with those variables instead of using CSS selectors to always find the things you're looking for in the data set that you're actively changing.

Also, I assume you mean "keyup."

thank you for the reply.

i already tried to put the position of selected row using "index". but that also returned same problem.

 

but now i solved the problem with a slight change on the above code. i just replaced ------------

.data("selected", 'Y')

to

.attr("data-selected", 'Y')

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...