Блог

Главная - Вопросы по программированию - как исправить provlem table

как исправить provlem table

#javascript #html

#javascript #HTML

Вопрос:

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

cod

 <!DOCTYPE html>
<html>
<body>

<form>
Select your favorite fruit:
<table>
<tr>
<td>
1
</td>
<td>
orange
</td>
</td>
<td>
<button type="button" onclick="myFunction(this)">Try it</button>
</td>

</tr>
</table>

<select id="mySelect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>



<script>
function myFunction(td) {

selectedRow = td.parentElement.parentElement;
document.getElementById("mySelect").value= selectedRow.cells[1].innerHTML;


}
</script>

</body>
</html>

Ответ №1:

Всякий раз, когда вы пытаетесь сделать это из HTML, попробуйте trim() использовать лишние пробелы, .innerHTML потому что HTML не чувствителен к пробелам, а JavaScript:

 document.getElementById("mySelect").value = selectedRow.cells[1].innerHTML.trim();
//                                                                        ^^^^^^^

Это заставит его работать. Фрагмент здесь:

 function myFunction(td) {
  selectedRow = td.parentElement.parentElement;
  document.getElementById("mySelect").value = selectedRow.cells[1].innerHTML.trim();
}  
 <form>
  Select your favorite fruit:
  <table>
    <tr>
      <td>
        1
      </td>
      <td>
        orange
      </td>
      </td>
      <td>
        <button type="button" onclick="myFunction(this)">Try it</button>
      </td>
    </tr>
  </table>

  <select id="mySelect">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="pineapple">Pineapple</option>
    <option value="banana">Banana</option>
  </select>
</form>