Как изменить внутреннее значение тега <td>? - PullRequest
Новая
       0

Как изменить внутреннее значение тега <td>?

0 голосов
/ 13 января 2020

Я пытаюсь сделать так, чтобы при нажатии на одну из <td> в таблице SVG появлялся в ней. Это версия моего кода с четырьмя слотами вместо 64, но функции те же: 

function addPiece() {
  document.getElementsByName("square").innerHTML = document.write("<svg width='100' height='100'> <circle cx='50' cy='50', r='40' stroke='black' stroke-width='4' fill='white' /> </svg>");
}
.square {
  background-color: #459f60;
  width: 100px;
  height: 100px;
}
<table style="border: 2px solid #808080">
  <tr>
    <td class="square" name="square" id="0-0" onclick="addPiece()"></td>
    <td class="square" name="square" id="0-1" onclick="addPiece()"></td>
  </tr>
  <tr>
    <td class="square" name="square" id="1-0" onclick="addPiece()"></td>
    <td class="square" name="square" id="1-1" onclick="addPiece()"></td>
  </tr>
</table>

Проблема с этим кодом заключается в том, что он просто заменяет весь объект SVG, а не вводит его внутри <td>, по которому щелкнули. Буду очень признателен за помощь, потому что у меня очень низкий уровень в js и html.

Ответы [ 4 ]

3 голосов
/ 13 января 2020

Проблема в использовании document.write. Это переопределит весь ваш документ HTML. Вместо этого используйте атрибут .innerHTML, чтобы переопределить HTML внутри выбранного элемента.

Обратите внимание, что в своем фрагменте кода я добавил идентификатор для элементов и передал его вызову функции. 

function addPiece(id) {
  document.getElementById(id).innerHTML = "<svg width='100' height='100'> <circle cx='50' cy='50', r='40' stroke='black' stroke-width='4' fill='white' /> </svg>"
}
.square {
  background-color: #459f60;
  width: 100px;
  height: 100px;
}
<table style="border: 2px solid #808080">
  <tr>
    <td class="square" id="square1" name="square" id="0-0" onclick="addPiece(this.id)"></td>
    <td class="square" id="square2" name="square" id="0-1" onclick="addPiece(this.id)"></td>
  </tr>
  <tr>
    <td class="square" id="square3" name="square" id="1-0" onclick="addPiece(this.id)"></td>
    <td class="square" id="square4" name="square" id="1-1" onclick="addPiece(this.id)"></td>
  </tr>
</table>
1 голос
/ 13 января 2020
Атрибуты

HTML не поддерживают одиночные кавычки, как вы используете в javascript. 

<table style="border: 2px solid #808080" id="table">
  <tr>
      <td class="square" id="square1" name="square">d</td>
      <td class="square" id="square2" name="square">s</td>
  </tr>
  <tr>
      <td class="square" id="square3" name="square">dd</td>
      <td class="square" id="square4" name="square">eee</td>
  </tr>
</table>

Вот код Jquery для отображения 

$(document).ready(function(){
  $('#table td').click(function(){
    var addhtml='<svg width="100" height="100"> <circle cx="50" cy="50", r="40" stroke="black" stroke-width="4" fill="white" /> </svg>';
    $(this).html(addhtml);
  })
});

При использовании jquery Нет необходимости добавлять функцию в сам элемент . Вы можете позвонить им просто используя этот класс.

0 голосов
/ 13 января 2020

Не используйте document.write для установки содержимого в html DOM. В качестве имени document.write устанавливает содержимое всего документа (перезаписывает весь html). Просто передайте содержимое с внутренней HTML напрямую. 

function addPiece() {
  document.getElementsByName("square").innerHTML = "<svg width='100' height='100'> <circle cx='50' cy='50', r='40' stroke='black' stroke-width='4' fill='white' /> </svg>";
}
.square {
  background-color: #459f60;
  width: 100px;
  height: 100px;
}
<table style="border: 2px solid #808080">
  <tr>
    <td class="square" name="square" id="0-0" onclick="addPiece()"></td>
    <td class="square" name="square" id="0-1" onclick="addPiece()"></td>
  </tr>
  <tr>
    <td class="square" name="square" id="1-0" onclick="addPiece()"></td>
    <td class="square" name="square" id="1-1" onclick="addPiece()"></td>
  </tr>
</table>
0 голосов
/ 13 января 2020

Я думаю, что document.write() здесь бесполезен. Вместо этого вы должны попробовать так: 

document.getElementsByName("square").innerHTML = "<svg width='100' height='100'> <circle cx='50' cy='50', r='40' stroke='black' stroke-width='4' fill='white' /> </svg>";
...