1

HTML テーブルを作成する関数があります。

makeHTMLTable: function(array){
    var table = document.createElement('table');
      for (var i = 0; i < array.length; i++) {
        var row = document.createElement('tr');
        var cell = document.createElement('td');
        cell.textContent = array[i];
        row.appendChild(cell);
        cell = document.createElement('td');
        var msgButton = document.createElement('button');
        msgButton.setAttribute("id", "msgButton" +i);
        msgButton.textContent = "message";
        msgButton.addEventListener("click", this.messageUser, false);
        cell.appendChild(msgButton)
        row.appendChild(cell);
        table.appendChild(row);
      }
      return table;
  },

次に、この機能があります：

messageUser: function(){
    debugger;
    this.parentNode.parentNode.remove();
    unMatch();
  },

msgbutton をクリックすると、ボタン自体と戻ってきたテキストの一部を含む行全体が削除されることを期待しています。すなわち:

hello [msgbutton]

goodbye [msgbutton]

hello 行の [msgbutton] をクリックすると、次のようになります。

goodbye [msgbutton]

しかし、これまでのところ、これthis.parentNode.parentNode.remove();は未定義を返しています..

編集：

以前の約束を呼び出しthis.retrieveMatches()ます this.fetchMatches() は配列を返します

  retrieveMatches: function(){
    var tableResult = this.makeHTMLMatchesTable(this.fetchMatches(object));
    var matches = document.getElementById('matches')
    matches.parentNode.insertBefore(tableResult, matches);
  },
4

1 に答える 1

2

HTML要素ではなく、「messageUser」関数を保持するオブジェクトを呼び出そうとしています。例えば：

var obj = {
    notify: function(msg){
        alert(msg);
    },
    messageUser: function(){
        this.notify("some message"); //This line will call obj.notify()
        this.parentNode.parentNode.remove(); //obj is not a HTML element, therefore it will create an error
    }
}

ループ内にイベント リスナーを追加しているため、イベント リスナーをバインドする関数を作成する必要があります。

function bindEvent(button){
    button.addEventListener("click", function(){
        this.parentNode.parentNode.remove(); //"this" refer to the "button" object
    }, false);
}

オブジェクト「テーブル」を返す前に、上記の関数を配置できます

于 2016-10-31T09:53:45.003 に答える