テーブルの行をクリックしてテキストフィールドに表示

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を変更する（イムはそれを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".

例は以下のスニペットに示されているようなコードを使用してそれに値を割り当てることができます。あなたのrespond..Iため

 
    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>