Question

我正在为我的实习设置质量控制，为此，我需要一个表格，该表格中包含带有ClickListeners的按钮。现在这是问题所在：如何为每个按钮添加OnClick侦听器？

onClick方法不必真正做任何事情。我现在整天都在玩这张桌子。

    <div id="Table"></div>

<script>
        function addTable() {

            var abc = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
                'AA', 'AB', 'AC', 'AD', 'AE', 'AF', 'AG', 'AH', 'AI', 'AJ', 'AK', 'AL', 'AM', 'AN', 'AO', 'AP', 'AQ', 'AR', 'AS', 'AT', 'AU', 'AV', 'AW', 'AX', 'AY', 'AZ'
            ];

            var myTableDiv = document.getElementById("Table");
            var table = document.createElement('TABLE');
            table.border = '1';
            var tableBody = document.createElement('TBODY');
            table.appendChild(tableBody);

            var Y_Length = parseInt(localStorage.getItem("YWert")) + 1;

            for (var i = 0; i < Y_Length; i++) {
                var tr = document.createElement('TR');
                tableBody.appendChild(tr);


                for (var j = 0; j < localStorage.getItem("XWert"); j++) {
                    var td = document.createElement('TD');
                    td.width = '75';

                    if (i == 0 && j != 0) {
                        td.innerHTML = abc[j - 1];

                    } else {
                        var button = document.createElement("button");
                        button.innerHTML = "";
                        td.appendChild(button);
                    }

                    if (j == 0 && i != 0) {
                        td.innerHTML = i;
                    }


                    tr.appendChild(td);
                }
            }



            myTableDiv.appendChild(table);

        }
        addTable();
    </script>

Answer 1

创建按钮时：

var button = document.createElement("
button.innerHTML = "";
td.appendChild(button);

只需添加

button.addEventListener("click", myFunction);

td.appendChild（button）之前

Answer 2

有两种方法可以做到这一点。

首先是为每个按钮提供一个事件侦听器：

private void ConfigureComboBoxColumns()
    {
        DataGridViewHelper dataGridViewHelper = new DataGridViewHelper();
        // Columns being converted to comboboxcolumns must be removed, created, and re-inserted
        dataGridViewHelper.RemoveColumns(ref _iprDataGridView,
                                         Columns.severity.ToString(),
                                         Columns.phase.ToString(),
                                         Columns.app.ToString(),
                                         Columns.project.ToString(),
                                         Columns.acceptancePeriod.ToString(),
                                         Columns.classConfirmed.ToString(),
                                         Columns.oncall.ToString(),
                                         Columns.warranty.ToString(),
                                         Columns.release.ToString(),
                                         Columns.category.ToString(),
                                         Columns.ticketType.ToString());

        DataGridViewComboBoxColumn comboBoxColumn = dataGridViewHelper.CreateComboBoxColumn(Columns.severity.ToString());
        comboBoxColumn.ValueType = typeof(int);
        string query = IPRDetailsConstants.SELECT_SEVERITY + IPRDetailsConstants.SEVERITY_COL;
        dataGridViewHelper.SetComboBoxChoicesDataSource(ref comboBoxColumn, Columns.severity.ToString(), query, dbConnection);
        _iprDataGridView.Columns.Insert((int)Columns.severity, comboBoxColumn);

        comboBoxColumn = dataGridViewHelper.CreateComboBoxColumn(Columns.phase.ToString());
        query = IPRDetailsConstants.SELECT_PHASE + IPRDetailsConstants.PHASE_COL;
        dataGridViewHelper.SetComboBoxChoicesDataSource(ref comboBoxColumn, Columns.phase.ToString(), query, dbConnection);
        _iprDataGridView.Columns.Insert((int)Columns.phase, comboBoxColumn);

        comboBoxColumn = dataGridViewHelper.CreateComboBoxColumn(Columns.app.ToString());
        query = IPRDetailsConstants.SELECT_APP + IPRDetailsConstants.APP_COL;
        dataGridViewHelper.SetComboBoxChoicesDataSource(ref comboBoxColumn, Columns.app.ToString(), query, dbConnection);
        _iprDataGridView.Columns.Insert((int)Columns.app, comboBoxColumn);

        comboBoxColumn = dataGridViewHelper.CreateComboBoxColumn(Columns.project.ToString());
        bool activeProjectsOnly = bool.Parse(ConfigurationManager.AppSettings.Get("ActiveProjectsOnly"));
        query = IPRDetailsConstants.SELECT_PROJECT + (activeProjectsOnly ? IPRDetailsConstants.PROJECT_COL_ACTIVE : IPRDetailsConstants.PROJECT_COL);
        dataGridViewHelper.SetComboBoxChoicesDataSource(ref comboBoxColumn, Columns.project.ToString(), query, dbConnection);
        _iprDataGridView.Columns.Insert((int)Columns.project, comboBoxColumn);

        comboBoxColumn = dataGridViewHelper.CreateComboBoxColumn(Columns.acceptancePeriod.ToString());
        comboBoxColumn.HeaderText = Resources.IprDetails_ConfigureComboBoxColumns_ap;
        comboBoxColumn.HeaderCell.ToolTipText = "acceptancePeriod";
        dataGridViewHelper.SetComboBoxChoicesStatic(ref comboBoxColumn, Columns.acceptancePeriod.ToString(), Resources.Y, Resources.N, Resources.S, Resources.X);
        _iprDataGridView.Columns.Insert((int)Columns.acceptancePeriod, comboBoxColumn);

        comboBoxColumn = dataGridViewHelper.CreateComboBoxColumn(Columns.classConfirmed.ToString());
        comboBoxColumn.HeaderText = Resources.IprDetails_ConfigureComboBoxColumns_cc;
        comboBoxColumn.HeaderCell.ToolTipText = "classConfirmed";
        dataGridViewHelper.SetComboBoxChoicesStatic(ref comboBoxColumn, Columns.classConfirmed.ToString(), Resources.Y, Resources.N, Resources.X);
        _iprDataGridView.Columns.Insert((int)Columns.classConfirmed, comboBoxColumn);

        comboBoxColumn = dataGridViewHelper.CreateComboBoxColumn(Columns.oncall.ToString());
        comboBoxColumn.HeaderText = Resources.IprDetails_ConfigureComboBoxColumns_oc;
        comboBoxColumn.HeaderCell.ToolTipText = "onCall";
        dataGridViewHelper.SetComboBoxChoicesStatic(ref comboBoxColumn, Columns.oncall.ToString(), Resources.Y, Resources.N, Resources.X);
        _iprDataGridView.Columns.Insert((int)Columns.oncall, comboBoxColumn);

        comboBoxColumn = dataGridViewHelper.CreateComboBoxColumn(Columns.warranty.ToString());
        comboBoxColumn.HeaderText = Resources.IprDetails_ConfigureComboBoxColumns_w;
        comboBoxColumn.HeaderCell.ToolTipText = "warranty";
        dataGridViewHelper.SetComboBoxChoicesStatic(ref comboBoxColumn, Columns.warranty.ToString(), Resources.Y, Resources.N, Resources.X);
        _iprDataGridView.Columns.Insert((int)Columns.warranty, comboBoxColumn);

        comboBoxColumn = dataGridViewHelper.CreateComboBoxColumn(Columns.ticketType.ToString());
        comboBoxColumn.HeaderText = Resources.IprDetails_ConfigureComboBoxColumns_tt;
        comboBoxColumn.HeaderCell.ToolTipText = "ticketType";
        dataGridViewHelper.SetComboBoxChoicesStatic(ref comboBoxColumn, Columns.ticketType.ToString(), "I", "P", "R", "K", "Q");
        _iprDataGridView.Columns.Insert((int)Columns.ticketType, comboBoxColumn);

        comboBoxColumn = dataGridViewHelper.CreateComboBoxColumn(Columns.release.ToString());
        bool activeReleasesOnly = bool.Parse(ConfigurationManager.AppSettings.Get("ActiveReleasesOnly"));
        query = IPRDetailsConstants.SELECT_RELEASE + (activeReleasesOnly ? IPRDetailsConstants.RELEASE_COL_ACTIVE : IPRDetailsConstants.RELEASE_COL);
        dataGridViewHelper.SetComboBoxChoicesDataSource(ref comboBoxColumn, Columns.release.ToString(), query, dbConnection);
        _iprDataGridView.Columns.Insert((int)Columns.release, comboBoxColumn);

        /*
        comboBoxColumn = dataGridViewHelper.CreateComboBoxColumn(Columns.category.ToString());
        query = IPRDetailsConstants.SELECT_CATEGORY + IPRDetailsConstants.CATEGORY_COL;
        dataGridViewHelper.SetComboBoxChoicesDataSource(ref comboBoxColumn, Columns.category.ToString(), query, dbConnection);
        _iprDataGridView.Columns.Insert((int)Columns.category, comboBoxColumn);
        */

    }

var abc = [
  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
  'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
  'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'AA',
  'AB', 'AC', 'AD', 'AE', 'AF', 'AG', 'AH', 'AI',
  'AJ', 'AK', 'AL', 'AM', 'AN', 'AO', 'AP', 'AQ',
  'AR', 'AS', 'AT', 'AU', 'AV', 'AW', 'AX', 'AY', 'AZ'
];

function clickHandler(evt) {
  var btn = evt.target;
  var col = btn.getAttribute('col');
  var row = btn.getAttribute('row');
  alert('clicked on cell '+col+row);
}

function addTable() {
  var X_Length = 10;//localStorage.getItem("XWert");
  var Y_Length = 10;//parseInt(localStorage.getItem("YWert")) + 1;
  var myTableDiv = document.getElementById("Table");
  var table = document.createElement('TABLE');
  var tableBody = document.createElement('TBODY');
  table.appendChild(tableBody);
  
  for (var i = 0; i < Y_Length; i++) {
    var tr = document.createElement('TR');
    tableBody.appendChild(tr);
    for (var j = 0; j < X_Length; j++) {
      var td = document.createElement('TD');

      if (j == 0 && i != 0) {
        td.innerHTML = i;
      }
      else if (i == 0 && j != 0) {
        td.innerHTML = abc[j - 1];
      }
      else {
        var button = document.createElement("button");
        button.setAttribute('col', abc[j - 1]);
        button.setAttribute('row', i);
        button.addEventListener('click', clickHandler); // <--- Event listener for each button
        button.innerHTML = "";
        td.appendChild(button);
      }

      tr.appendChild(td);
    }
  }

  myTableDiv.appendChild(table);
}

addTable();

th, td {
  border: 1px solid #999;
  margin: 0;
  padding: 5px;
  width: 75px;
}

table {
  border-collapse: collapse;
}

第二个是为整个表提供一个，并过滤事件以确保它是被单击的按钮。 这种方法使用较少的内存和较少的事件侦听器。在初始渲染后添加其他行或列也可以使用

<div id="Table"></div>

var abc = [
  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
  'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
  'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'AA',
  'AB', 'AC', 'AD', 'AE', 'AF', 'AG', 'AH', 'AI',
  'AJ', 'AK', 'AL', 'AM', 'AN', 'AO', 'AP', 'AQ',
  'AR', 'AS', 'AT', 'AU', 'AV', 'AW', 'AX', 'AY', 'AZ'
];

function clickHandler(evt) {
  var btn = evt.target;
  if (btn.nodeName === 'BUTTON') {
    var col = btn.getAttribute('col');
    var row = btn.getAttribute('row');
    alert('clicked on cell '+col+row);
  }
}

function addTable() {
  var X_Length = 10;//localStorage.getItem("XWert");
  var Y_Length = 10;//parseInt(localStorage.getItem("YWert")) + 1;
  var myTableDiv = document.getElementById("Table");
  var table = document.createElement('TABLE');
  table.addEventListener('click', clickHandler); // <--- One event listener for the entire table.
  var tableBody = document.createElement('TBODY');
  table.appendChild(tableBody);
  
  for (var i = 0; i < Y_Length; i++) {
    var tr = document.createElement('TR');
    tableBody.appendChild(tr);
    for (var j = 0; j < X_Length; j++) {
      var td = document.createElement('TD');

      if (j == 0 && i != 0) {
        td.innerHTML = i;
      }
      else if (i == 0 && j != 0) {
        td.innerHTML = abc[j - 1];
      }
      else {
        var button = document.createElement("button");
        button.setAttribute('col', abc[j - 1]);
        button.setAttribute('row', i);
        button.innerHTML = "";
        td.appendChild(button);
      }

      tr.appendChild(td);
    }
  }

  myTableDiv.appendChild(table);
}

addTable();

th, td {
  border: 1px solid #999;
  margin: 0;
  padding: 5px;
  width: 75px;
}

table {
  border-collapse: collapse;
}

此外，简洁的移动代码只需要在函数外运行一次，因此不必每次调用函数时都运行。

如何在此表中添加特定的OnClick侦听器？

2 个答案: