Question

我想显示数据库monogodb中的html表（它可以正常工作）。之后，我要填写所选表格行中的字段，问题是选中了该行，但未填写字段。

错误是：Uncaught TypeError：无法读取null的属性“行” 在selectedRowToInput

这是我的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.log('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>

Answer 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.log('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.log("Error: HTML table not found"); 
                  return;
                }
                if(table.rows == undefined) { 
                  console.log("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>

如何填写所选表格行中的字段？

1 个答案: