Wątek przeniesiony 2015-01-04 13:39 z Webmastering przez dzek69.

Odwołanie się do elementu tablicy

0

witam,
jest to mój pierwszy post na tym forum, wcześniej przez długi okres czasu byłem tylko czytelnikiem, aż sam postanowiłem coś podziałać w dziedzinie programowania. W projekcie natknąłem się na problem następujący. Chcę odczytać wartość jaka znajduje się w tabeli w HTMLU za pomocą JavaScript'u. Używam następującego polecenia:

 document.getElementById("myTable").rows[i].cells[j]; 

Lecz nie mogę odczytać wartości, na stronie zwracana jest albo wartość: "undefined" lub "[object HTMLTableCellElement]". W jaki sposób odczytać wartość z tabel, nie chciałbym robić na sztywno wpisywania wartości. Druga sprawa to jak utworzyć obiekt lub strukturę gdy wartości te uda mi się zczytać?
pozdrawiam

1

Gdy dostaniesz się już do [object HTMLTableCellElement] - to jesteś blisko. Masz w zmiennej OBIEKT komórki. Obiekt ma wiele właściwości, jedną z nich jest jej wartość spomiędzy tagów <td></td> - tą wartością jest innerHTML ;)

Drugie pytanie: co dokładnie masz na myśli? Co chcesz robić z tymi danymi?

0

Twoja porada zadziałała, potrafię już wyrzucić na stronę wartość z komórki. Ogólnym pomysłem jest tworzenie diagramu kołowego z danych zawartych w tabeli. Po najechaniu na wybrany wiersz tabeli, CANVAS automatycznie powinien rysować diagram. Do tego potrzebny jest obiekt który posiada 3 wartości: kolor dla danej kolumny, ( ta wartość byłaby stała dla każdego wiersza), wartość liczbowa każdej komórki wybranego wiersza( przekazywana z tabelii), oraz label( podpis który również będzie stały dla każdego z wierszy). Więc jedyne co to potrzebuję to przekazywać wartości komórek do obiektu. Tak proste rozwiązanie chyba nie zadziała ?

  var data = [{
                    label: "40-60",
                    value: document.getElementById("myTable").rows[].cells[].innerHTML,
                    color: "red"
                }, 
1

nie, ale możesz zrobić coś w rodzaju:

var data = [];
for (var j=0; j<ilosc_komorek_w_wierszu; j++) {
  data.push({
    label: "40-60",
    value: document.getElementById("myTable").rows[i].cells[j].innerHTML,
    color: "red"
  });
}

Mniej więcej coś takiego, dopasowane do Twoich potrzeb.

Poza tym warto wydzielić sobie obiekt document.getElementById("myTable") do osobnej zmiennej (żeby oszczędzić poszukiwania go w dokumencie za każdym razem od nowa) i podobnie w każdym wierszu z (np) myTable.rows[i]. Dużo to nie zmieni (chyba, że danych jest naprawdę wiele), ale dużo też Ciebie nie kosztuje ;)

0

Zastosowałem się do zaleceń i gra :) dzięki! Pojawił się następny problem, nie potrafię wyczyścić elementu canvas. Wszystko już działa poprawnie, tylko gdy zmieniam położenie kursora na inny wiersz, na płótnie diagram oraz legenda zostają nadrysowane. Gdy najade po raz kolejny na ten sam wiersz, to diagram oraz legenda pogrubiają się, chcę tego uniknąć i przed każdym rozpoczęciem rysowania wstawiłem kod

  this.context.clearRect(0, 0, canvas.width, canvas.height); 

Wyczytałem na stronce gdzie polecenie było użyte po wciśnięciu klawisza, i prawidłowo element był czyszczony, ale w sumie później na elemencie nie były robione żadne operacje. W moim przypadku chciałbym to zautomatyzować i wstawić przed każdym rysowaniem nowego diagramu, czyli przed każdym najechaniem kursora na wiersz tabeli. Lecz po wpisaniu tej linijki do skryptu na elemencie Canvas nic się nie dzieje.

0

za mało kodu by coś ocenić

0

 function PieChart(canvasId, data){
          

                this.canvas = document.getElementById(canvasId);
				       
                this.data = data;
               this.context.clearRect(0, 0, canvas.width, canvas.height); 


                // stałe
                this.padding = 10;
                this.legendBorder = 2;
                this.pieBorder = 5;
                this.colorLabelSize = 20;
                this.borderColor = "#555";
                this.shadowColor = "#777";
                this.shadowBlur = 10;
                this.shadowX = 2;
                this.shadowY = 2;
                this.font = "16pt Calibri";
                
                // zależności
                this.context = this.canvas.getContext("2d");
                this.legendWidth = this.getLegendWidth();
                this.legendX = this.canvas.width - this.legendWidth;
                this.legendY = this.padding;
                this.pieAreaWidth = (this.canvas.width - this.legendWidth);
                this.pieAreaHeight = this.canvas.height;
                this.pieX = this.pieAreaWidth / 2;
                this.pieY = this.pieAreaHeight / 2;
                this.pieRadius = (Math.min(this.pieAreaWidth, this.pieAreaHeight) / 2) - (this.padding);
                
                // rysowanie wykresu
                this.drawPieBorder();
                this.drawSlices();
                this.drawLegend();
            }
            
            // szerokosc legendy
            PieChart.prototype.getLegendWidth = function(){

                // dlugosc etykiet

                this.context.font = this.font;
                var labelWidth = 0;
                
                for (var n = 0; n < this.data.length; n++) {
                    var label = this.data[n].label;
                    labelWidth = Math.max(labelWidth, this.context.measureText(label).width);
                }
                
                return labelWidth + (this.padding * 2) + this.legendBorder + this.colorLabelSize;
            };
            
            PieChart.prototype.drawPieBorder = function(){
                var context = this.context;
                context.save();
                context.fillStyle = "white";
                context.shadowColor = this.shadowColor;
                context.shadowBlur = this.shadowBlur;
                context.shadowOffsetX = this.shadowX;
                context.shadowOffsetY = this.shadowY;
                context.beginPath();
                context.arc(this.pieX, this.pieY, this.pieRadius + this.pieBorder, 0, Math.PI * 2, false);
                context.fill();
                context.closePath();
                context.restore();
            };
            
            // rysowanie wycinkow
            PieChart.prototype.drawSlices = function(){
                var context = this.context;
                context.save();
                var total = this.getTotalValue();
                var startAngle = 0;
                for (var n = 0; n < this.data.length; n++) {
                    var slice = this.data[n];
                    
                    // rysujemy wycinek koła
                    var sliceAngle = 2 * Math.PI * slice.value / total;
                    var endAngle = startAngle + sliceAngle;
                    
                    context.beginPath();
                    context.moveTo(this.pieX, this.pieY);
                    context.arc(this.pieX, this.pieY, this.pieRadius, startAngle, endAngle, false);
                    context.fillStyle = slice.color;
                    context.fill();
                    context.closePath();
                    startAngle = endAngle;
                }
                context.restore();
            };
            
            PieChart.prototype.getTotalValue = function(){
                var data = this.data;
                var total = 0;
                
                for (var n = 0; n < data.length; n++) {
                    total += data[n].value;
                }
                
                return total;
            };
            
            // legenda

            PieChart.prototype.drawLegend = function(){
                var context = this.context;
                context.save();
                var labelX = this.legendX;
                var labelY = this.legendY;
                
                context.strokeStyle = "black";
                context.lineWidth = this.legendBorder;
                context.font = this.font;
                context.textBaseline = "middle";
                
                for (var n = 0; n < this.data.length; n++) {
                    var slice = this.data[n];
                    
                    // etykieta danych
                    context.beginPath();
                    context.rect(labelX, labelY, this.colorLabelSize, this.colorLabelSize);
                    context.closePath();
                    context.fillStyle = slice.color;
                    context.fill();
                    context.stroke();
                    
                    context.fillStyle = "black";
                    context.fillText(slice.label, labelX + this.colorLabelSize + this.padding, labelY + this.colorLabelSize / 2);
                    
                    labelY += this.colorLabelSize + this.padding;
                }
                context.restore();
            };
            

To jest funkcja odpowiedzialna za rysowanie, jako argument, przekazuje obiekt, czyli dane potrzebne do utworzenia diagramu oraz legendy, oraz obiekt canvas.

0

to teraz przesuń pierwszą podświeloną linię pod tą drugą podświetloną :P

i następnym razem zaglądaj w konsolę błędów

user image

0

Przeniosłem linijkę we wskazane miejsce ale bez zmian, po usunięciu całkowicie linijki, canvas poprawnie tworzy diagramy, po wklejeniu we wskazane miejsce, na elemencie canvas nic się nie dzieje. Używam Notepad++, nie orientuję się czy jest tam konsola błędów, polecasz jakiś konkretny edytor do pisania w JS HTML ?

1

Konsolę błędów masz w przeglądarce - poszukaj w Google gdzie dokładnie. Uruchom konsolę, odśwież stronę i wykonaj swoje akcje - zapewne znajdzie się tam jakiś błąd.

// przyjrzałem się i zapewne OPRÓCZ PRZENIESIENIA tej linijki to zamiast canvas.width, potrzebujesz this.canvas.width i to samo dla height.

Staraj się rozumieć kod, a nie kopiować gotowe przykłady i losowo zmieniać licząc, że zadziała.

0

i gdy wszystko już sobie poukładałem, postanowiłem spróbować jeszcze bardziej to zautomatyzować. Dostosowałem się do Twojego zalecenia żeby wrzucić obiekt do zmiennej. Przy tworzeniu obiektu działa wszystko poprawnie, prócz wyrysowania wycinków koła. Dane podawane są w odpowiedniej formie i liczbie. Legenda wraz z kolorami wyrysowuje się bezbłędnie. Problem w tym, że przy tym tworzeniu obiektu z pobranych danych ze strony sam diagram nie jest rysowany. Gdzie zrobiłem błąd? Dane na pewno są poprawne, sprawdzałem 3 razy.

oto kod który stworzyłem:

 function onmouseovertrzy(){

			var labele = ['0-6','7-13','14-18','19-24','25-37','38-50','50 i wiecej']
			var colory = ['red','green','blue','yellow','violet','black','white']
			var tabele = document.getElementById("myTable")
			
var data = [];
for (var j=1; j<=7; j++) {
  data.push({
    label: labele[j-1],
    value: tabele.rows[3].cells[j].innerHTML,
    color: colory[j-1]
  });
}
			
			  new PieChart("myCanvas", data);
		};
	 

Problem rozwiązałem, chodziło o typ zmiennej. Zmienna tabele była typu string, wystarczyło przeprowadzić konwersje do typu Number

1 użytkowników online, w tym zalogowanych: 0, gości: 1