Как использовать идентификатор родительской таблицы в качестве параметра в событии onclick? - PullRequest
Новая
       15

Как использовать идентификатор родительской таблицы в качестве параметра в событии onclick?

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

У меня будет эта кнопка один раз для каждой таблицы (около 25 отдельных таблиц) на этой странице, и я надеюсь найти способ, чтобы событие onclick вызывало функцию constructDataValueString и передавало id родительской таблицы (чтобы мне не приходилось явно ссылаться на идентификатор таблицы).

Есть ли способ написать: 

onclick="constructDataValueString(*id_of_parent_table*)"

Графический пример разметки HTML:

My HTML structure

Ответы [ 5 ]

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

Как показывают другие ответы, используйте closest () https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Чтобы ответить на ваш вопрос, а также обратиться к кому-то, кто хочет отправить конкретный элемент, есть способ точно отправить идентификатор таблицы или любого тега, который вы хотите. 

`<table id="populationbyage" border="2">
<thead>TABLE</thead>
<tbody>
  <tr>
    <td>
      Some Cell...
    </td>
    <td>
      <button onclick="constructs(this.closest('#populationbyage').id)">
        Copy
      </button>
    </td>
  </tr>
</tbody>
</table>
<script>
    function constructs(id) {
        console.log(id)     
    }
</script>
`

Извлечение идентификатора будет точно указывать на таблицу, к которой вы хотите получить доступ. Это поможет вам игнорировать все вложенные таблицы, если в будущем вы захотите добавить некоторые.

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

Чтобы ваша внутренняя структура table могла измениться, не затрагивая эту часть, вы можете использовать this.closest("table"), чтобы получить первый родительский элемент <table>, откуда вы можете получить идентификатор:

constructDataValueString(this.closest("table").id)

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

Вы можете использовать closest () , например: 

onclick="constructDataValueString(this.closest('table').id)"

Пример 

const constructDataValueString = (id) => console.log("table id is: ", id);
<table id="populationbyage" border="2">
<thead>TABLE</thead>
<tbody>
  <tr>
    <td>
      Some Cell...
    </td>
    <td>
      <button onclick="constructDataValueString(this.closest('table').id)">
        Copy
      </button>
    </td>
  </tr>
</tbody>
</table>
0 голосов
/ 23 января 2019

Более гибкое решение 

function parent(el, selector) {
    var matchesFn;

    // find vendor prefix
    ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'].some(function (fn) {
        if (typeof document.body[fn] == 'function') {
            matchesFn = fn;
            return true;
        }
        return false;
    });

    var parent;

    // traverse parents
    while (el) {
        parent = el.parentElement;
        if (parent && parent[matchesFn](selector)) {
            return parent;
        }
        el = parent;
    }

    return null;
}

<table id="populationbyage">
  <tbody>
    <tr>
      <td>
        <button onclick="console.log(parent(event.target, '#populationbyage'))">Copy</button>
      </td>
    </tr>
  </tbody>
</table>
0 голосов
/ 23 января 2019

Конечно - используйте this.parentNode.parentNode.parentNode.parentNode.id: 

function constructDataValueString(id) {
  console.log(id);
}
<table id="populationbyage">
  <tbody>
    <tr>
      <td>
        <button onclick="constructDataValueString(this.parentNode.parentNode.parentNode.parentNode.id)">Copy</button>
      </td>
    </tr>
  </tbody>
</table>

(Вышеприведенный пример является минималистичным - он следует точно такой же структуре, он просто содержит только необходимые элементы и атрибуты.

...