Как изменить значение одного тега данных таблицы одним нажатием кнопки - PullRequest
Новая
       7

Как изменить значение одного тега данных таблицы одним нажатием кнопки

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

Это мой JS-код, который я пытаюсь сделать, это нажать кнопку с id="tg-13", просто отобразить 13 в тд. Но что действительно происходит, когда я нажимаю кнопку "tg-13", появляются все цифры. Как я могу решить эту проблему? 

 <tr onclick="aparecer()">
    <td class="tg-kpoh" style="text-align: center;">J</td>
    <td id="tg-13" style="text-align: center;"><button>?</button></td>
    <td id="tg-10" style="text-align: center;"><button>?</button></td>
    <td id="tg-45" style="text-align: center;"><button>?</button></td>
    <td id="tg-47" style="text-align: center;"><button>?</button></td>
    <td id="tg-35" style="text-align: center;"><button>?</button></td>
  </tr>

Функция - aparaecer () 

function aparecer() {

    document.getElementById("tg-13").innerHTML = "13";

    document.getElementById("tg-10").innerHTML = "10";

    document.getElementById("tg-45").innerHTML = "45";  

    document.getElementById("tg-47").innerHTML = "47";

    document.getElementById("tg-35").innerHTML =  "35";

}

Ответы [ 2 ]

2 голосов
/ 09 ноября 2019
  • Сохраните нужный текст в атрибуте data-*.
  • Использование Element.addEventListener()

const btns = document.querySelectorAll("[data-text]");
const setText = ev => ev.currentTarget.textContent = ev.currentTarget.dataset.text
btns.forEach(el => el.addEventListener('click', setText));
<table>
  <tr>
    <td>J</td>
    <td><button data-text="13">?</button></td>
    <td><button data-text="10">?</button></td>
    <td><button data-text="45">?</button></td>
    <td><button data-text="47">?</button></td>
    <td><button data-text="35">?</button></td>
  </tr>
</table>

Отказ от использования встроенного JavaScript, такого как обработчики событий onclick="". Храните свой код в одном месте, его легче отлаживать и придерживайтесь логики.

2 голосов
/ 09 ноября 2019

Проблема в том, что у вас есть событие click во всей строке, на tr, а не на каждом тд.

Я бы сделал следующее: 

const onClick = (e) => {
  const currentId = e.id;
  e.innerHTML = currentId.replace('tg-', '');
}
.td-center {
  text-align: center;
}
<table>
  <tr>
    <td class="tg-kpoh td-center">J</td>
    <td id="tg-13" class="td-center" onclick="onClick(this)"><button>?</button></td>
    <td id="tg-10" class="td-center" onclick="onClick(this)"><button>?</button></td>
    <td id="tg-45" class="td-center" onclick="onClick(this)"><button>?</button></td>
    <td id="tg-47" class="td-center" onclick="onClick(this)"><button>?</button></td>
    <td id="tg-35" class="td-center" onclick="onClick(this)"><button>?</button></td>
  </tr>
</table>

Я сделал дополнительные улучшения, такие как:

  1. Создан класс td-center вместо встроенного стиля.
  2. Рефакторинг события onClick, что у вас было.

Надеюсь, это поможет!

...