Clicking the row of the table and displaying it to text field

Question

I have text field inside the table, and also the data below in it..I want to display the data to text field after clicking the row.

I tried these code but nothing happens. Help me please.

These are the code for the table.

<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>

And these are the javascript code...

<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>

Can someone help me with this.! All I want is if I click any row of the table, it will directly display it to the text field.

Hi thanks for your respond..I tried your code but still nothing happens.. — Ares_SVX, Sep 17 '17 at 08:42

Namindu Sanchila · Answer 1 · 2017-09-17T08:10:37.610

0

Change the code like this.

<?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>";
}
?>

then change your javascript to like this (Im coding it Jquery and change it you want.)

<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>

this the solution. if is this help for your leave a comment.

edited Sep 17 '17 at 08:10

answered Sep 17 '17 at 08:04

Namindu Sanchila

414
1
9
23

Hi Namindu, I tried your code but still nothing happened..it only makes the table editable. – Ares_SVX Sep 17 '17 at 08:48
That is not your want? do you want get user input in your table? – Namindu Sanchila Sep 17 '17 at 08:58
Hi Namindu, what i want is when the user clicks the row, it display directly to the text field. – Ares_SVX Sep 17 '17 at 09:04

score 0 · Answer 2 · answered Sep 17 '17 at 08:09

You should use HTML DOM getElementById() Method to get the element with the specified ID.

HTML DOM getElementsByName() Method Get all elements with the specified name.

You have to edit your js script as follows.

If you are using 'HTML DOM getElementsByName() Method' to assign value to that specific element you should use it as document.getElementsByName("name1")[0].value="value". Since this method returns the collection of objects having the same name passed as it's parameter.
If you are using the HTML DOM getElementById() you can assign values into it by using the code as document.getElementById("idofelement").value="value".

An example is given in the snippet below.

 
    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>

It's `getElementsByName` . Note the plural. It returns an array-like NodeList of elements with that name attribute. getElementbyName doesn't exsts. `getElementsByName` exists, which returns a collection of the elements. If you plan to find only one: `document.getElementsByName("hi")[0].setAttribute("value", "my value is high");` see (https://stackoverflow.com/questions/2980830/javascript-getelementbyname-doesnt-work. — Jino Shaji, Sep 17 '17 at 08:51
Yeah. as my example demonstrated above. Note that Id should be unique. Just try getElementsbyId and give your feed back. Most probably it will work. — Jino Shaji, Sep 17 '17 at 09:11
Not exactly, Can you share your code that you have done so far for better identification of your problem.? — Jino Shaji, Sep 17 '17 at 15:20
Also change getElementsByName() to getElementById inside the loop. Is it already done? — Jino Shaji, Sep 18 '17 at 08:32

Clicking the row of the table and displaying it to text field

2 Answers2