manipulieren von Interval

[Jungspund]

Hallo,
ich stehe vor folgenden Problem:
ich möchte einer Tabelle per Javascript eine Reihe hinzufügen, diese Reihe enthält einen Ladebalken und ein Intervall welches diesen "animiert".
Nun möchte ich, dass dieses Element per Mausklick in der Tabelle auswählbar ist und das Intervall sich per start/Pause Button steuern lässt.

der Code:

erstellen der Reihe

function addDownload(filename, filesize) { 

            var table       = document.getElementById("download_table");
            var body        = table.getElementsByTagName("tbody")[0];

            var progres     = function() {
                this.tr                         = document.createElement("tr");
                this.progress                   = document.createElement('div');
                this.td1                        = document.createElement("td");
                this.td1.appendChild(document.createTextNode(filename));
                this.td2                        = document.createElement("td");
                this.td2.appendChild(document.createTextNode(filesize));
                this.td3                        = document.createElement("td");
                this.container                  = document.createElement("div");
                this.progressbar                = document.createElement("div");
                this.bar                        = document.createElement("div");
                this.text                       = document.createElement("div");
                
                this.progressbar.style.width     = "100%";
                this.progressbar.style.height    = "20px";
            
                this.bar.className               = "progress";
            
                this.progressbar.appendChild(this.bar);
            
                this.text.style.marginTop        = "-19px"
                this.text.style.textAlign        = "center";
                this.text.style.textSize         = "15px";
            
                this.text.appendChild(document.createTextNode("0%"));
                this.progressbar.appendChild(this.text);
                this.container.appendChild(this.progressbar);
                //Progressbalken Ende
                
                this.td3.appendChild(this.container);
                this.td4                        = document.createElement("td");
                this.button                     = document.createElement("input");
                this.button.setAttribute("type","button");
                this.button.setAttribute("Value", ". . .");
                this.td4.appendChild(this.button);
                this.td5                        = document.createElement("td");
                this.td5.appendChild(document.createTextNode("downloading")); 
                
                this.td1.setAttribute("width", "40%");
                this.td2.setAttribute("width", "10%");
                this.td3.setAttribute("width", "30%");
                this.td4.setAttribute("width", "10%");
                this.td5.setAttribute("width", "10%");
            
                
                
                this.tr.appendChild(this.td1);
                this.tr.appendChild(this.td2);
                this.tr.appendChild(this.td3);
                this.tr.appendChild(this.td5);
                this.tr.appendChild(this.td4);
                this.tr.setAttribute("onclick", "markRow(this)");
                this.tr.setAttribute("style", "background:rgb(245, 245, 245)");
            
                
                body.appendChild(this.tr);
                
                //Das ändern der Größe eines Ladebalkens
                this.set_percantage = function(percantage) {    
                        this.bar.style.width = percantage + "%";
                        this.text.removeChild(this.text.firstChild);
                        this.text.appendChild(document.createTextNode(percantage + "%"));
                    
                }
                this.beendet        = function() {
                    this.td5.removeChild(this.td5.firstChild);
                    this.td5.appendChild(document.createTextNode("beendet"));
                }
                this.pause          = function() {
                    this.td5.removeChild(this.td5.firstChild);
                    this.td5.appendChild(document.createTextNode("pause"));
                }
                this.resume         = function() {
                    this.td5.removeChild(this.td5.firstChild);
                    this.td5.appendChild(document.createTextNode("downloading"));
                }
                
                var i = 0;
                
                var interval = window.setInterval(function() {
                    if(i>=100) {
                        window.clearInterval(interval);
                        row.beendet();
                    }
                    row.set_percantage(i++);
                },150);
                
                this.pause = function() {
                    window.clearInterval(interval);
                    row.pause();
                }
                this.resume = function() {
                    row.resume();
                    var interval = winddow.setInterval(function() {
                      if(i>=100) {
                        window.clearInterval(interval);
                        row.beendet();
                    }
                    row.set_percantage(i++);  
                },150);
            }
                
                
            }
            
            var row = new progres();
            
            
        }

Code zum markieren der Zeilen per mausclick:

function markRow(item) {
            
            item.style.backgroundColor = (item.style.backgroundColor == 'rgb(245, 245, 245)') ? '#ccc' : 'rgb(245, 245, 245)' ;
            
            
            if(markedRow == item) {
                markedRow   = undefined;
                changeStatusCancel();
                changeStatusPause();
                changeStatusResume();
            }
            else if(typeof(markedRow) != "undefined") {
                markedRow.style.backgroundColor = 'rgb(245, 245, 245)';
                markedRow   = item;
            }
            else if(typeof(markedRow) == "undefined") {    
                markedRow   = item;
                changeStatusCancel();
                changeStatusPause();
                changeStatusResume();
            }
        }