單擊表格的行並將其顯示到文本字段

Question

我在表格中有文本字段，並且還有其中的數據。我想要在單擊行後將數據顯示到文本字段。

我試過這些代碼，但沒有任何反應。請幫幫我。

這些是表格的代碼。

<table id="tableqwe"> 
 
<tr> 
 
<th>Name</th> 
 
<th>Id Number</th> 
 
<th>Course</th> 
 
<th>Year level</th> 
 
<th>School Year</th> 
 
<th>Semester</th> 
 
<th></th> 
 
</tr> 
 
    
 
<tr> 
 
<th><input type="Text" id="name1" name="name1" style="width:200px;"></th> 
 
<th><input type="Text" id="idnumber2" name="idnumber2" style="width:200px;"></th> 
 
<th><input type="Text" id="course3" name="course3" style="width:80px;"></th> 
 
<th><input type="Text" id="yearlvl4" name="yearlvl4" style="width:200px;"></th> 
 
<th><input type="Text" id="schoolyear5" name="schoolyear5" style="width:150px;"></th> 
 
<th><input type="Text" id="semester6" name="semester6" style="width:100px;"></th> 
 
<th><input type="button" value="Add" class="btntable edit" style="width:50px;"></th> 
 
</tr> 
 
    
 
<?php 
 
while($row = mysqli_fetch_array($result)) { 
 
    echo "<tr>"; 
 
    echo "<td>" . $row['name'] . "</td>"; 
 
    echo "<td>" . $row['Id_number'] . "</td>"; 
 
    echo "<td>" . $row['course'] . "</td>"; 
 
    echo "<td>" . $row['year_level'] . "</td>"; 
 
    echo "<td>" . $row['school_year'] . "</td>"; 
 
    echo "<td>" . $row['semester'] . "</td>"; 
 
    echo "<td>"?><input type="button" class="btntable delete" value="Delete" style="width:50px;"><?php 
 
    echo "</tr>"; 
 
} 
 
?> 
 
</table>

而這些JavaScript代碼...

<script> 
 
    var table1 = document.getElementById('tableqwe'); 
 
    
 
    for(var i = 2; i < table1.rows.length; i++) 
 
    { 
 
     table.rows[i].onclick = function() 
 
     { 
 
      rIndex = this.rowIndex; 
 
      console.log(rIndex); 
 
      
 
      document.getElementsByName("name1").value = this.cells[0].innerHTML; 
 
      document.getElementsByName("idnumber2").value = this.cells[1].innerHTML; 
 
      document.getElementsByName("course3").value = this.cells[2].innerHTML; 
 
      document.getElementsByName("yearlvl4").value = this.cells[3].innerHTML; 
 
      document.getElementsByName("schoolyear5").value = this.cells[4].innerHTML; 
 
      document.getElementsByName("semester6").value = this.cells[5].innerHTML; 
 
     } 
 
    } 
 
</script>

有人可以幫助我！我只需要點擊表格中的任意一行，它就會直接將其顯示到文本字段中。

Answer 1

更改這樣的代碼。

<?php 
while($row = mysqli_fetch_array($result)) { 
    echo "<tr contenteditable = 'true' id='name' data-name= '//php variable like $id '>"; 
    echo "<td>" . $row['name'] . "</td>"; 
    echo "<td>"?><input type="button" class="btntable delete" value="Delete" style="width:50px;"><?php 
    echo "</tr>"; 
} 
?> 

然後改變你的JavaScript喜歡這個（IM編碼它jQuery和改變你想要它。）

<Script> 
    $(document).on('click', '#button Id or Class here', function(){ 

    //get id of user updates 
    var id = $(this).data("name"); 
    // get values 
    var val = $(this).text(); 


     }); 

</script> 

這

的解決方案。如果這是對你的幫助發表評論。

Answer 2

您應該使用HTML DOM getElementById()方法來獲取具有指定ID的元素。

HTML DOM getElementsByName() Method獲取具有指定名稱的所有元素。

你必須編輯你的js腳本如下。

• 如果您使用'HTML DOM getElementsByName（）方法'爲該特定元素賦值，則應將其用作document.getElementsByName("name1")[0].value="value"。由於此方法返回具有相同名稱的對象的集合，因爲它的參數已傳遞。
• 如果使用的HTML DOM getElementById()則可以通過使用該代碼作爲document.getElementById("idofelement").value="value".

一個示例在下面的代碼段中給出值分配到其中。

 
    var table1 = document.getElementById('tableqwe'); 
 
    
 
    for(var i = 2; i < table1.rows.length; i++) 
 
    { 
 
     table1.rows[i].onclick = function() 
 
     { 
 
      rIndex = this.rowIndex; 
 
      console.log(this.cells[0].innerHTML); 
 
      
 
      document.getElementById("name1").value = this.cells[0].innerHTML; 
 
      console.log(document.getElementsByName("name1")[0].value); 
 
      document.getElementById("idnumber2").value = this.cells[1].innerHTML; 
 
      document.getElementById("course3").value = this.cells[2].innerHTML; 
 
      document.getElementById("yearlvl4").value = this.cells[3].innerHTML; 
 
      document.getElementById("schoolyear5").value = this.cells[4].innerHTML; 
 
      document.getElementById("semester6").value = this.cells[5].innerHTML; 
 
     } 
 
    }

<table id="tableqwe"> 
 
<tr> 
 
<th>Name</th> 
 
<th>Id Number</th> 
 
<th>Course</th> 
 
<th>Year level</th> 
 
<th>School Year</th> 
 
<th>Semester</th> 
 
<th></th> 
 
</tr> 
 
    
 
<tr> 
 
<th><input type="Text" id="name1" name="name1" style="width:200px;"></th> 
 
<th><input type="Text" id="idnumber2" name="idnumber2" style="width:200px;"></th> 
 
<th><input type="Text" id="course3" name="course3" style="width:80px;"></th> 
 
<th><input type="Text" id="yearlvl4" name="yearlvl4" style="width:200px;"></th> 
 
<th><input type="Text" id="schoolyear5" name="schoolyear5" style="width:150px;"></th> 
 
<th><input type="Text" id="semester6" name="semester6" style="width:100px;"></th> 
 
<th><input type="button" value="Add" class="btntable edit" style="width:50px;"></th> 
 
</tr> 
 
    
 
<tr> 
 
<td>name</td> 
 
<td>12</td> 
 
<td>Course</td> 
 
<td>Course 12</td> 
 
<td>School year 12</td> 
 
    <td>School year 12</td> 
 
<td><input type="button" class="btntable delete" value="Delete" style="width:50px;"></tr>; 
 
    
 
</table>