moving through elements

[funbinod]

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 September 24, 2019 by funbinod

[justsomeguy]

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."

[funbinod]

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')