Tabellenreihe mittels Button auslesen von Hoffi, 28.11.2011 12:43

Tabellenreihe mittels Button auslesen

Hoffi 28.11.2011 12:43

javascript

Hallo Zusammen,

ich versuche seit einiger Zeit, aus einer Tabelle die ich mit Java Script fülle, die Werte aus der selektierten Zeile zu erhalten. Die Tabelle sieht wie folgt aus:

Spaltenname|Spaltenname|Spaltenname| ||||_______ o | | | | ||||_______ o | | | | |||________|_______ o | | | |

Wobei "o" die Buttons darstellt, und die Tabelle mit Werten gefüllt ist.

Wie bekomme ich jetzt die Daten der Zeilen in der, der Button selektiert wurde.

Vielen Dank

Puh da gibt es sicherlich viele Wege. Wenn du die Tabelle dynamisch mit Javascript erstellst sind die werte ja bereits im Javascript selbst. Wenn du OOP anwendest hast du eventuell für jede Tabellenzeile ein Objekt. Dann brauchst du nur noch die Zuweisung zwischen Button und Zeilenobjekt. Das könntest du in einem Array machen: var arArray[ elementButton ] = objZeile; wenn jemand auf den Button klickt hast du dann folgende funktion function zuweisung( event ) { arArray[ event.target ] //--- zugewiesenes Objekt }

Alternativ kannst du die Zeilen auch durchnummerieren so wie in Excel. Die Werte hast du in einem (mehreren) Array und kannst sie recht einfach auslesen. Die Array Struktur könnte so aussehen:

arArray[ 0 ][ 0 ] = Button Zeile 1; arArray[ 0 ][ 1 ] = Spalte 1 Zeile 1; arArray[ 0 ][ 2 ] = Spalte 2 Zeile 1; arArray[ 1 ][ 0 ] = Button Zeile 2; arArray[ 1 ][ 1 ] = Spalte 1 Zeile 2; arArray[ 1 ][ 2 ] = Spalte 2 Zeile 2;

Wenn jemand auf den Button in Zeile 2 Klickt übergibst du "1" an dein Script. Dann kannst du: for( var intSpalte = arArray[intZeile]) //-- intZeile = 1 { } Die Spalten durchgehen.

Das sind meine Ideen.

Gruß arArray[ 0 ][ 0 ] = T arArray[ 0 ][ 1 ] = - arArray[ 0 ][ 2 ] = R arArray[ 0 ][ 3 ] = e arArray[ 0 ][ 4 ] = x

Danke schonmal für die Antwort, jetzt habe ich auch ein Codeschnippsel in der Hand, um es besser beschreiben zu können :D

<script type="text/javascript">
function Werteliste (querystring) {
  if (querystring == '') return;
  var wertestring = querystring.slice(1);
  var paare = wertestring.split("&");
  var paar, name, wert;
  for (var i = 0; i < paare.length; i++) {
    paar = paare[i].split("=");
    name = paar[0];
    wert = paar[1];
    name = unescape(name).replace("+", " ");
    wert = unescape(wert).replace("+", " ");
    this[name] = wert;
  }
}
var liste = new Werteliste(location.search);
</script>
<script type="text/javascript">
function giveIt () {
for (var eigenschaft in liste) {
	if(liste[eigenschaft] == "Search"){
	liste[eigenschaft] == ""
	}else 	if(liste[eigenschaft] == "Search" || liste[eigenschaft] == "Book" || liste[eigenschaft] == "New Search" || liste[eigenschaft] == "first"|| liste[eigenschaft] == "second"|| liste[eigenschaft] == "third") {
	liste[eigenschaft] == ""
	}else{
     document.write(
      "<td>" + liste[eigenschaft] + "</td>");
  }
}
}
</script>
<script type="text/javascript">
function randomFromTo(from, to){
       return Math.floor(Math.random() * (to - from + 1) + from);
    }
</script>
<link rel="stylesheet" type="text/css" href="css/roldial3.css" />
<script type="text/javascript" src="scripts/LogoUtils.js"></script>
<script type="text/javascript" src="scripts/uif.js"></script>
</head>

<body style="height: 303px">
<form name="Formular" method="GET" action="eventList.html"
	onsubmit="return validate_form(this)" style="height: 290px">
<div
	style="position: absolute; left; top: 150px; width: 170px; height: 20px; border: 1px #C0C0C0 solid; z-index: 1">
<select name="Artists" size="1" id="Artists"
	style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border-width: 0px; font-family: Arial; font-size: 13px;"
	title="Artists">
	<option selected value="No artist choosen">Choose Artist</option>
	<option value="Hansi Hinterseher">Hansi Hinterseher</option>
	<option value="Rihanna">Rihanna</option>
	<option value="DJ Bobo">DJ Bobo</option>
	<option value="STS">STS</option>
</select></div>

<div
	style="position: absolute; left: 200px; top: 150px; width: 170px; height: 20px; border: 1px #C0C0C0 solid; z-index: 2">
<select name="Event" size="1" id="Event"
	style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border-width: 0px; font-family: Arial; font-size: 13px;"
	title="Event">
	<option selected value="No event choosen">Choose Event</option>
	<option value="Nokia&nbsp;Night&nbsp;of&nbsp;Proms">Nokia&nbsp;Night&nbsp;of&nbsp;Proms</option>
	<option value="Last Tournee">Last Tournee</option>
	<option value="World Tournee">World Tournee</option>
	<option value="Unplugged">Unplugged</option>
</select></div>

<div
	style="position: absolute; left: 400px; top: 150px; width: 170px; height: 20px; border: 1px #C0C0C0 solid; z-index: 3">
<select name="Location" size="1" id="Location"
	style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border-width: 0px; font-family: Arial; font-size: 13px;"
	title="Location">
	<option selected value="No location choosen">Choose Location</option>
	<option value="Hamburg">Hamburg</option>
	<option value="Milano">Milano</option>
	<option value="Munich">Munich</option>
	<option value="Vienna">Vienna</option>
</select></div>

<input type="text" id="Date"
	style="position: absolute; left: 600px; top: 150px; width: 170px; height: 20px; border: 1px #C0C0C0 solid; font-family: Arial; font-size: 13px; z-index: 4"
	name="Date" value="search date" maxlength="10" title="Date"> <i
	style="position: absolute; left: 780px; top: 150px; width: 170px; height: 20px">Format:
DD.MM.YYYY</i>
<div style="position: absolute; top: 208px; left: 125px;"><input
	type="submit" id="SubmitButton" name="submit"
	onclick="return validate_form(this)" value="New Search"></div>
<input type="button" id="book" name="book" onclick="return test(this)"
	value="Book"
	style="position: absolute; right; top: 208px; width: 96px; height: 25px; font-family: Arial; font-size: 13px; z-index: 7">

</br>
<table border="1" cellpadding="5" cellspacing="0" class="tabelle">
	<tr>
		<th></th>
		<td>Artist</td>
		<td>Event</td>
		<td>Location</td>
		<td>Date</td>
	</tr>
	<tr>
		<th><input type="radio" name="concreteInput" value="first"></th>
		<script type="text/javascript">
		giveIt();
	     </script>
	</tr>
	<tr>
		<th><input type="radio" name="concreteInput" value="second"></th>
		<script type="text/javascript">
	for (var eigenschaft in liste) {

	if(liste[eigenschaft] == "Nokia&nbsp;Night&nbsp;of&nbsp;Proms" || liste[eigenschaft] == "Last Tournee" || liste[eigenschaft] == "World Tournee"){
	liste[eigenschaft] = "Unplugged"
	}else if(liste[eigenschaft] == "Unplugged" || liste[eigenschaft] == "Last Tournee" || liste[eigenschaft] == "World Tournee"){
	liste[eigenschaft] = "Nokia&nbsp;Night&nbsp;of&nbsp;Proms"
	}else if(liste[eigenschaft] == "Unplugged" || liste[eigenschaft] == "Last Tournee" || liste[eigenschaft] == "Nokia&nbsp;Night&nbsp;of&nbsp;Proms"){
	liste[eigenschaft] = "World Tournee"
	}

	if(liste[eigenschaft] == "Munich" || liste[eigenschaft] == "Milano" || liste[eigenschaft] == "Hamburg"){
	liste[eigenschaft] = "Vienna"
	}else if(liste[eigenschaft] == "Vienna" || liste[eigenschaft] == "Milano" || liste[eigenschaft] == "Hamburg"){
	liste[eigenschaft] = "Munich"
	}else if(liste[eigenschaft] == "Munich" || liste[eigenschaft] == "Vienna" || liste[eigenschaft] == "Hamburg"){
	liste[eigenschaft] = "Milano"
	}else if(liste[eigenschaft] == "Munich" || liste[eigenschaft] == "Milano" || liste[eigenschaft] == "Vienna"){
	liste[eigenschaft] = "Hamburg"
	}

	if(liste[eigenschaft].match(/[0-9]{2}\.{1}[0-9]{2}\.{1}[0-9]{4}/i)){
	var dates = liste[eigenschaft].split(".");
	dates[0] = randomFromTo(1,31);
	dates[1] = randomFromTo(1,12);
	dates[2] = randomFromTo(2012,2014);
	if(dates[0] < 10){
	dates[0] = "0" + dates[1];
	}
	if(dates[1] < 10){
	dates[1] = "0" + dates[1];
	}
	liste[eigenschaft] = dates[0] + "." + dates[1] + "." + dates[2];
	}

	if(liste[eigenschaft] == "Search" || liste[eigenschaft] == "Book" || liste[eigenschaft] == "New Search" || liste[eigenschaft] == "first"|| liste[eigenschaft] == "second"|| liste[eigenschaft] == "third") {
	liste[eigenschaft] == ""
	}else {

     document.write(
      "<td>" + liste[eigenschaft] + "</td>");
  }
}
	     </script>
	</tr>
	<tr>
		<th><input type="radio" name="concreteInput" value="third"></th>
		<script type="text/javascript">
			for (var eigenschaft in liste) {

	if(liste[eigenschaft] == "Nokia&nbsp;Night&nbsp;of&nbsp;Proms" || liste[eigenschaft] == "Last Tournee" || liste[eigenschaft] == "World Tournee"){
	liste[eigenschaft] = "Unplugged"
	}else if(liste[eigenschaft] == "Unplugged" || liste[eigenschaft] == "Last Tournee" || liste[eigenschaft] == "World Tournee"){
	liste[eigenschaft] = "World Tournee"
	}else if(liste[eigenschaft] == "Unplugged" || liste[eigenschaft] == "Last Tournee" || liste[eigenschaft] == "Nokia&nbsp;Night&nbsp;of&nbsp;Proms"){
	liste[eigenschaft] = "Nokia&nbsp;Night&nbsp;of&nbsp;Proms"
	}

	if(liste[eigenschaft] == "Munich" || liste[eigenschaft] == "Milano" || liste[eigenschaft] == "Hamburg"){
	liste[eigenschaft] = "Hamburg"
	}else if(liste[eigenschaft] == "Vienna" || liste[eigenschaft] == "Milano" || liste[eigenschaft] == "Hamburg"){
	liste[eigenschaft] = "Milano"
	}else if(liste[eigenschaft] == "Munich" || liste[eigenschaft] == "Vienna" || liste[eigenschaft] == "Hamburg"){
	liste[eigenschaft] = "Vienna"
	}else if(liste[eigenschaft] == "Munich" || liste[eigenschaft] == "Milano" || liste[eigenschaft] == "Vienna"){
	liste[eigenschaft] = "Munich"
	}

if(liste[eigenschaft].match(/[0-9]{2}\.{1}[0-9]{2}\.{1}[0-9]{4}/i)){
	var dates = liste[eigenschaft].split(".");
	dates[0] = randomFromTo(1,31);
	dates[1] = randomFromTo(1,12);
	dates[2] = randomFromTo(2012,2014);
	if(dates[0] < 10){
	dates[0] = "0" + dates[1];
	}
	if(dates[1] < 10){
	dates[1] = "0" + dates[1];
	}
	liste[eigenschaft] = dates[0] + "." + dates[1] + "." + dates[2];
	}

	if(liste[eigenschaft] == "Search" || liste[eigenschaft] == "Book" || liste[eigenschaft] == "New Search" || liste[eigenschaft] == "first"|| liste[eigenschaft] == "second"|| liste[eigenschaft] == "third") {
	liste[eigenschaft] == ""
	}else {

     document.write(
      "<td>" + liste[eigenschaft] + "</td>");
  }
}
	     </script>
	</tr>
	</tr>
</table>
</form>
</body>

Bitte nicht schlagen :D Aber ich bin ziemlich unerfahren in HTML und JScript, also bitte nicht vom stuhl fallen :D

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Hoffi: Tabellenreihe mittels Button auslesen

Beitrag lesen

Tabellenreihe mittels Button auslesen

Tabellenreihe mittels Button auslesen