Как заполнить поля из выбранной строки таблицы?

Я хочу отобразить html-таблицу из базы данных monogodb (работает правильно). После этого я хочу заполнить поля из выбранной строки таблицы, проблема в том, что строка выбрана, но поля не заполнены.

Ошибка: Uncaught TypeError: Не удается прочитать «строки» свойства null в выбранномRowToInput

это мой html-код:

 <body>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type  = "text/javascript">
    $(document).ready(() => {
    $('#chercher').click(() => {
        const requestURL = 'chercher/' + $('#nameBox').val();
    console.info('making ajax request to:', requestURL);
    $.ajax({
      url: requestURL,
      type: 'GET',
      dataType : 'json',
      success: (data) => {
       
       if (data.nom){
        $('#nom').html('My name is ' + data.nom);
         var doctor_data = '';
      
           var  value=data ;
           
           doctor_data  += '<tbody>';
           doctor_data  += '<tr>';
                    doctor_data  += '<td>'+value.nom+'</td>';
                    doctor_data += '<td>'+value.prenom+'</td>';
                    doctor_data  += '</tr>';
                    doctor_data  += '</tbody>';
      $('#doctor_table').append(doctor_data ); 
                
            
       }
       
        $('#nom').html('');  
       }
       
      },
    });
  });
  $(document).ajaxError(() => {
    $('#status').html('Error: unknown ajaxError!');
  });
  
})

var table = document.getElementById("doctor_table");
        
            
            // display selected row data into input text
            function selectedRowToInput()
            {
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                         
                      //get the seected row index
                      document.getElementById("nom").value =this.cells[0].innerHTML ;
                      document.getElementById("prenom").value = this.cells[1].innerHTML;
                      
                      
                    };
                }
            }
            selectedRowToInput();

</script>


        Pseudo:<input id = "nameBox" type = "text" size = "20"/>
                <button id= "chercher">Chercher</button> </br></br>
               
                <div id = "nom"></div>

        <hr/>
       
        
            <div class = "container">
                    <div class = "tab tab-1">
                        <table  id = "doctor_table">
            
            <tr>
                  <th>nom</th>
                  <th>prenom</th>
                 
          </tr>
              </table>
      
            </div>

            <div class = "tab tab-2">
                    Nom :<input type = "text" name = "nom" id = "nom1">
                    Prenom :<input type = "text" name = "prenom" id = "prenom">
                    
                </div>
            </div>

  <div id = "status"></div>
  </body>
</html>

javascript

06.03.2019 02:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Вы можете начать с этого:

 <body>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type  = "text/javascript">
    $(document).ready(() => {
  $('#chercher').click(() => {
    const requestURL = 'chercher/' + $('#nameBox').val();
    console.info('making ajax request to:', requestURL);
    $.ajax({
      url: requestURL,
      type: 'GET',
      dataType : 'json',
      success: (data) => {
        if (data.nom) {
          $('#nom').html('My name is ' + data.nom);
          var doctor_data = '';
          var  value=data ;
          doctor_data  += '<tbody>';
          doctor_data  += '<tr>';
          doctor_data  += '<td>'+value.nom+'</td>';
          doctor_data += '<td>'+value.prenom+'</td>';
          doctor_data  += '</tr>';
          doctor_data  += '</tbody>';
          $('#doctor_table').append(doctor_data ); 
        }
        $('#nom').html('');
        selectedRowToInput();
      }
    });
  });
  $(document).ajaxError(() => {
    $('#status').html('Error: unknown ajaxError!');
  });

  // var table = $("#doctor-table"); // doesn't work, object but no rows.
  var table = document.getElementById("doctor_table");
  alert("table = " + table);

            // display selected row data into input text
            function selectedRowToInput()
            {
                if (!table) { 
                  console.info("Error: HTML table not found"); 
                  return;
                }
                if (table.rows == undefined) { 
                  console.info("Error: HTML table has no rows"); 
                  return;
                }
                // alert("table.rows.length = "+table.rows.length);
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                      // alert("this.cells.length = "+this.cells.length);
                      // alert("this.cells[0].innerHTML = "+this.cells[0].innerHTML); 
                      //get the selected row index
                      document.getElementById("nomTest").value =this.cells[0].innerHTML;
                      document.getElementById("prenom").value = this.cells[1].innerHTML;
                      
                      
                    };
                }
            }
  selectedRowToInput();

});

</script>


        Pseudo:<input id = "nameBox" type = "text" size = "20"/>
                <button id= "chercher">Chercher</button> </br></br>
               
                <div id = "nom"></div>

        <hr/>
       
        
            <div class = "container">
                    <div class = "tab tab-1">
                        <table  id = "doctor_table">
            
            <tr>
                  <th>nom</th>
                  <th>prenom</th>
                 
          </tr>
           <tr>
                  <td>nom1</td>
                  <td>prenom1</td>
                 
          </tr>
           <tr>
                  <td>nom2</td>
                  <td>prenom2</td>
                 
          </tr>
           <tr>
                  <td>nom3</td>
                  <td>prenom3</td>
                 
          </tr>
              </table>
      
            </div>

            <div class = "tab tab-2">
                    Nom :<input type = "text" name = "nom" id = "nomTest">
                    Prenom :<input type = "text" name = "prenom" id = "prenom">
                    
                </div>
            </div>

  <div id = "status"></div>
  </body>
</html>

он не работает и показывает мне предупреждение «localhost: 3000 indique null» и ошибку: «(index): 157 Uncaught TypeError: Cannot read property 'rows' of null»

— 06.03.2019 17:55

Извините, я отредактировал сообщение, чтобы преобразовать «doctor-table» в «doctor_table».

— 07.03.2019 00:36

06.03.2019 02:53