Показать html данные из таблицы JS в заглавие - PullRequest
Новая
       38

Показать html данные из таблицы JS в заглавие

0 голосов
/ 24 апреля 2020

У меня есть таблица JS, сгенерированная на основе данных, введенных пользователями в текстовые области на моем веб-сайте (поэтому при первой загрузке страницы этих данных нет: вам нужно что-то ввести в текстовую область, а затем сгенерировать таблицу ). Теперь я пытаюсь получить эти данные (из сгенерированной таблицы) и показать их в виде (h2 /) для примера.

Поэтому я создал скрипт для получения этой информации: 

<script type="text/javascript">
    function buttonTEST()
    {
        document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1].innerHTML;
    }
</script>

и кнопка для использования этого сценария: 

<input id=GetTest type="button" onclick="buttonTEST()" value="TEST ME"/>

Когда я ввожу «document.getElementById .... et c» в консоль, она показывает данные, которые мне нужны, поэтому я думаю, что сценарий в порядке.

Но как мне получить его, чтобы ПОКАЗАТЬ эти данные (alphanumeri c) в виде простого текста (h2)?

Может кто-нибудь помочь? :)

РЕДАКТИРОВАТЬ! Я попробовал это: 

<div>
<script type="text/javascript">function buttonTEST(){document.getElementById("yourID").innerHTML="document.getElementById('excel_table1').getElementsByTagName('tr'). 
[0].cells[1]";
}
</script>

<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>

</div>

Но когда я нажимаю, я просто получаю "document.getElementById ('excel_table1'). GetElementsByTagName ('tr') [ 0] .cells [1] " как H2.

Ответы [ 3 ]

1 голос
/ 24 апреля 2020

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

Если значение уже является строкой, вам не нужно заключать его в кавычки, так как это заставляет javascript думать, что вы хотите написать этот фрагмент кода на выход h2 

<div>
<script type="text/javascript">
function buttonTEST() {
  document.getElementById("yourID").innerHTML = document.getElementById('excel_table1').getElementsByTagName('tr').
[0].cells[1].innerHTML;
}
</script>

<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>

</div>
0 голосов
/ 24 апреля 2020

Ок, решил! Спасибо всем за то, что поставили меня на правильный путь: D

Итак, что сработало для меня: 

<script type="text/javascript">

     function buttonTEST()
     {
document.getElementById('yourID').innerHTML=document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1].innerHTML;
}
</script>

<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>

</div>

@ vhoyer был прав, мне нужно было снять лишние " в противном случае JS думает, что я хочу написать этот фрагмент кода на выход h2.

И еще одна мысль заключается в том, что мне нужно снова поставить «.inner HTML» после всех моих попыток. и клетки (да, это делает .inner HTML внутри другого .inner HTML xD)

Надеюсь, что это может кому-то помочь!

Приветствия

0 голосов
/ 24 апреля 2020

Вам необходимо создать элемент <h2> в файле html, чтобы заменить его значение (которое должно быть пустым в вашем файле html), используя javascript.

Убедитесь, что вы присвоили что <h2> идентификатор.

Затем, используя document.getElementById, откройте его в своем скрипте и измените его.

Пример ниже. 

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
    <h2 id="yourID"></h2>
    <input id="anotherID" type="button" onclick="buttonTest()" value="TEST ME"/>
    <script>
      function buttonTest() {
        //Grab the ID and change it
        document.getElementById("yourID").innerHTML = "whatever you want it to display";
      }
    </script>
  </body>
</html>

Кроме того, убедитесь, что значения атрибутов html заключены в одинарные или двойные кавычки.

Редактирование:

Здесь пример для вашего варианта использования: 

 <!DOCTYPE html>
 <html>

 <head>
   <meta charset="UTF-8">
   <title>title</title>
 </head>

 <body>
   <h2 id="yourID"></h2>
   <input id="anotherID" type="button" onclick="buttonTest()" value="TEST ME" />
   <p>Press me to find out the second cell in the second row</p>
   <table id="table">
     <tr>
       <th>Color</th>
       <th>Object</th>
     </tr>
     <tr>
       <td>Red</td>
       <td>Poppy</td>
     </tr>
   </table>
   <script>
     function buttonTest() {
       //Here we grab the value of the second cell in the second row in a variable called value. You can change the row and cell index to access specific values.
       var value = document.getElementById("table").rows[1].cells[1].innerHTML;
       //Then we display it
       document.getElementById("yourID").innerHTML = value;
     }
   </script>
 </body>

 </html>
...