Endre value av et felt i et skjema ut i fra IDen til en tabbelcelle?

[hakonvl]

Hei

 

Har et prosjekt som bør være ferdig ganske snart, men er stuck med noe Javascrip/Jquery kode. Saken er et jeg omtrent ikke kan Javascript, men PHP biten kan jeg.

 

Saken er at jeg har en tabbell, der hver celle har en ID. Når en celle velges ved hjelp av jquery vil jeg endre verdien til et skjult felt i et skjema. Navnet til det skulte feltet tilsvarer IDen tabellcellen. Hvordan gjør jeg dette?

 

	$currentY = 1;
	//http://stackoverflow.com/questions/2013902/select-cells-on-a-table-by-dragging
	$output = "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\" type=\"text/javascript\"></script>
	  <script type=\"text/javascript\" charset=\"utf-8\">
   		$(function () {
     		var isMouseDown = false;
     		$(\"#our_table td\")
       	.mousedown(function () {
       	  isMouseDown = true;
       	  $(this).toggleClass(\"highlighted\");
       	  id = $(this).attr('id');
       	  $(id).val('seat');

       	  return false; // prevent text selection
       	})
       	.mouseover(function () {
       	  if (isMouseDown) {
       	    $(this).toggleClass(\"highlighted\");
       	    id = $(this).attr('id');
       	    $(id).val('seat');
       	  }
       	})
       	.bind(\"selectstart\", function () {
        	 return false; // prevent text selection in IE
       	});

     		$(document)
       	.mouseup(function () {
       	  isMouseDown = false;
       	});
 		  });
 		</script>
 		 <style type=\"text/css\" media=\"screen\">
  		 table td {
     		width:50px;
     		height:25px;
     		text-align:center;
     		vertical-align:middle;
     		background-color:#ccc;
   		}

   		table td.highlighted {
    		 background-color:#999;
   		}
 		</style>
 		<table id=\"our_table\"><form method=\"post\" action=\"\">";
 		$id = 1;
	while($currentY <= $y){
		$output .= "<tr>";
		$currentX = 1;
		while($currentX <= $x){
			$output .= "<td id=\"" . $id . "\">" . $currentY . " - " . $currentX . "<input type=\"hidden\" name=\"" . $id . "\" value=\"open\"></td>";
			$currentX++;
			$id++;
			}
		$currentY++;
		$output .= "</tr>";

	}
	$output .= "</form></table>";

Dette f. eks følgende output

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

	  <script type="text/javascript" charset="utf-8">
   		$(function () {
     		var isMouseDown = false;
     		$("#our_table td")
       	.mousedown(function () {
       	  isMouseDown = true;
       	  $(this).toggleClass("highlighted");
       	  id = $(this).attr('id');
       	  $(id).val('seat');

       	  return false; // prevent text selection
       	})
       	.mouseover(function () {
       	  if (isMouseDown) {
       	    $(this).toggleClass("highlighted");
       	    id = $(this).attr('id');
       	    $(id).val('seat');
       	  }
       	})
       	.bind("selectstart", function () {
        	 return false; // prevent text selection in IE
       	});

     		$(document)
       	.mouseup(function () {
       	  isMouseDown = false;
       	});
 		  });
 		</script>
 		 <style type="text/css" media="screen">
  		 table td {
     		width:50px;
     		height:25px;
     		text-align:center;
     		vertical-align:middle;
     		background-color:#ccc;
   		}

   		table td.highlighted {
    		 background-color:#999;
   		}
 		</style>
 		<table id="our_table"><form method="post" action=""><tr><td id="1">1 - 1<input type="hidden" name="1" value="open"></td><td id="2">1 - 2<input type="hidden" name="2" value="open"></td><td id="3">1 - 3<input type="hidden" name="3" value="open"></td><td id="4">1 - 4<input type="hidden" name="4" value="open"></td><td id="5">1 - 5<input type="hidden" name="5" value="open"></td></tr><tr><td id="6">2 - 1<input type="hidden" name="6" value="open"></td><td id="7">2 - 2<input type="hidden" name="7" value="open"></td><td id="8">2 - 3<input type="hidden" name="8" value="open"></td><td id="9">2 - 4<input type="hidden" name="9" value="open"></td><td id="10">2 - 5<input type="hidden" name="10" value="open"></td></tr><tr><td id="11">3 - 1<input type="hidden" name="11" value="open"></td><td id="12">3 - 2<input type="hidden" name="12" value="open"></td><td id="13">3 - 3<input type="hidden" name="13" value="open"></td><td id="14">3 - 4<input type="hidden" name="14" value="open"></td><td id="15">3 - 5<input type="hidden" name="15" value="open"></td></tr><tr><td id="16">4 - 1<input type="hidden" name="16" value="open"></td><td id="17">4 - 2<input type="hidden" name="17" value="open"></td><td id="18">4 - 3<input type="hidden" name="18" value="open"></td><td id="19">4 - 4<input type="hidden" name="19" value="open"></td><td id="20">4 - 5<input type="hidden" name="20" value="open"></td></tr><tr><td id="21">5 - 1<input type="hidden" name="21" value="open"></td><td id="22">5 - 2<input type="hidden" name="22" value="open"></td><td id="23">5 - 3<input type="hidden" name="23" value="open"></td><td id="24">5 - 4<input type="hidden" name="24" value="open"></td><td id="25">5 - 5<input type="hidden" name="25" value="open"></td></tr><tr><td id="26">6 - 1<input type="hidden" name="26" value="open"></td><td id="27">6 - 2<input type="hidden" name="27" value="open"></td><td id="28">6 - 3<input type="hidden" name="28" value="open"></td><td id="29">6 - 4<input type="hidden" name="29" value="open"></td><td id="30">6 - 5<input type="hidden" name="30" value="open"></td></tr><tr><td id="31">7 - 1<input type="hidden" name="31" value="open"></td><td id="32">7 - 2<input type="hidden" name="32" value="open"></td><td id="33">7 - 3<input type="hidden" name="33" value="open"></td><td id="34">7 - 4<input type="hidden" name="34" value="open"></td><td id="35">7 - 5<input type="hidden" name="35" value="open"></td></tr><tr><td id="36">8 - 1<input type="hidden" name="36" value="open"></td><td id="37">8 - 2<input type="hidden" name="37" value="open"></td><td id="38">8 - 3<input type="hidden" name="38" value="open"></td><td id="39">8 - 4<input type="hidden" name="39" value="open"></td><td id="40">8 - 5<input type="hidden" name="40" value="open"></td></tr><tr><td id="41">9 - 1<input type="hidden" name="41" value="open"></td><td id="42">9 - 2<input type="hidden" name="42" value="open"></td><td id="43">9 - 3<input type="hidden" name="43" value="open"></td><td id="44">9 - 4<input type="hidden" name="44" value="open"></td><td id="45">9 - 5<input type="hidden" name="45" value="open"></td></tr><tr><td id="46">10 - 1<input type="hidden" name="46" value="open"></td><td id="47">10 - 2<input type="hidden" name="47" value="open"></td><td id="48">10 - 3<input type="hidden" name="48" value="open"></td><td id="49">10 - 4<input type="hidden" name="49" value="open"></td><td id="50">10 - 5<input type="hidden" name="50" value="open"></td></tr></form></table> 

 

Takk

 

Edit: Beklager en del dårlig formatert kode, skal se om jeg får rydda opp i det.

Endret 21. mars 2011 av Rockie

[agrimsrud]

Heisann!

 

Hvis du vil jobbe med en et inputelement som ligger inni den cellen du trykker på, regner jeg med du kan bruke:

$(this).find("input[type=hidden]").val("her setter du en verdi");

 

Har ikke testet utdraget under, men kanskje kan det sette deg i riktig retning?

$("#our_table td").bind({
mousedown: function() {
	$(this).toggleClass("highlighted");
	$(this).find("input[type=hidden]").val(123);
},
mouseup: function() {
	$(this).toggleClass("highlighted");
	$(this).find("input[type=hidden]").val('');
},
select: function() {
	return false;
}
});

[hakonvl]

Takk for svar, men jeg fant en bedre måte å løse hele saken på. Må ha vært ganske trøtt når jeg tenkte ut dette, for det er ganske tungvindt.

 

Det jeg gjør nå er å ha et hidden felt der valuen oppdateres med ,id for hver celle som markeres. Blir en CSV string da. Da slipper jeg å ha kanskje flere hundre hidden felts, i og med at denne tabellen kan bli ganske stor.

 

Bruker også ganske plain javascript kode til dette. Hver gang en celle oppdateres så legges dette til i en variabel, og onSubmit er satt til å sette valuen i dette feltet til denne verdien.

 

Jeg hadde fortsatt problemer med dette med å sette ID atr, men jeg fant til slutt ut hvordan jeg kunne sette ID med Drupal sitt form API som jeg bruker. Leste bare ikke dokumentasjonen godt nok.

 

Takk for svar i allefall