Использование onclick для вызова функции из другой функции - PullRequest
Новая
       15

Использование onclick для вызова функции из другой функции

0 голосов
/ 08 января 2019

Я хочу идентифицировать ячейку таблицы HTML, когда мышь щелкает по значению меню в раскрывающемся списке. Используя код W3schools, я могу получить эту информацию о ячейке, но не из раскрывающегося списка внутри ячейки. Где-то здесь DOM неправильно настроен. 

<html>
    <td onclick=myFunction5(this)>OPEN</td>
</html>

<script>
function myFunction5(x) {
   alert("Cell index is: " + x.cellIndex);
</script>

Использование этого кода для одной ячейки таблицы HTML: 

<td id = "td01" onclick=myFunction5(this)>
    <div class="dropdown">
        <button class="dropbtn">Change?</button>
        <div class="dropdown-content">
            <p onclick = "displayTableData()">OPEN </p>          
            <p onclick = "displayTableData()">Closed</p>
        </div>
     </div>
</td>

Теперь мне нужно получить идентификатор ячейки из другой функции: - 

function displayTableData() {
     // when cell onclick - show cell index and contents
    var myTable = document.getElementById('t02');
    var totalRows = document.getElementById('t02').rows.length;
    var totalCol = myTable.rows[0].cells.length;

    document.getElementById(‘td01’).onclick=myFunction5(y);
    var newCellid = y.CellIndex     // return cell id 
}

alert - индекс ячейки не определен

1 Ответ

0 голосов
/ 09 января 2019

Насколько я понимаю, у вас есть ячейка таблицы со структурой меню внутри нее. Вы хотите идентифицировать ячейку таблицы, в которой находится меню, по щелчку по меню, чего можно достичь, подняв DOM от цели события, пока не дойдете до ячейки (или не исчерпаете предков).

Проще, если вы подключите слушателей динамически, тогда этот внутри слушателя будет элементом, по которому щелкнули. В противном случае вы должны передать это или событие, например, 

<p onclick="displayTableData(this)">Closed</p>

или 

<p onclick="displayTableData(event)">Closed</p>

Следующее должно помочь вам: 

// Attach listeners
window.onload = function() {
  var nodes = document.querySelectorAll('.dropdown-content p').forEach(
    node => node.addEventListener('click', displayTableData, false)
  );
}

/* Return first ancestor of node that has tagName
** @param {HTMLElement} node - node to start from
** @param {string} tagName - tag name of element to find
** @returns {HTMLElement|undefined} - first matching ancestor or null if none found
*/
function getAncestor(node, tagName) {
  if (!node || !tagName) return;
  while (node.parentNode) {
    node = node.parentNode;
    if (node.tagName && node.tagName.toLowerCase() == tagName) {
      return node;
    }
  }
  return null;
}

function displayTableData(evt) {
  // Stop bubbling
  evt.stopPropagation();
  var cell = getAncestor(this, 'td');
  console.log(`cellIndex: ${cell && cell.cellIndex}`);
}

function myFunction5(node) {
  console.log(`myFunction5: ${node.tagName} ${node.cellIndex}`);
}
<table>
  <tr>
    <td id="td01" onclick="myFunction5(this)">
      <div class="dropdown">
        <button class="dropbtn">Change?</button>
        <div class="dropdown-content">
          <p>OPEN </p>
          <p>Closed</p>
        </div>
      </div>
    </td>
  </tr>
</table>

Существует также element.closest , который должен иметь разумную поддержку с указанным выше в качестве запасного варианта. 

// Attach listeners
window.onload = function() {
  var nodes = document.querySelectorAll('.dropdown-content p').forEach(
    node => node.addEventListener('click', displayTableData, false)
  );
}

function displayTableData(evt) {
  // Stop bubbling
  evt.stopPropagation();
  var cell = this.closest('td');
  console.log(`cellIndex: ${cell && cell.cellIndex}`);
}

function myFunction5(node) {
  console.log(`myFunction5: ${node.tagName} ${node.cellIndex}`);
}
<table>
  <tr>
    <td id="td01" onclick="myFunction5(this)">
      <div class="dropdown">
        <button class="dropbtn">Change?</button>
        <div class="dropdown-content">
          <p>OPEN </p>
          <p>Closed</p>
        </div>
      </div>
    </td>
  </tr>
</table>
...