Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2007
    Posts
    123
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Assigning table cell value to text field

    I currently have a table where the current cell (cursor hover) is highlighted along with the top cell in that column and first cell in row. I want to assign the values in these cells to input text fields. The first column cell is identified by Col1Cell[0] where Cell is the top table data cell of the current column.
    I can access the value of the cell by Col1Cell[0].innerHTML But when I try to assign this value to a text field nothing happens.
    I have
    Code:
    document.getElementById("tableID").fieldID.value = Col1Cell[0].innerHTML
    Any ideas?

  • #2
    d_s
    d_s is offline
    New Coder
    Join Date
    Mar 2010
    Location
    India
    Posts
    52
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Hi,

    try this code, it works. you can change the id's too to suit your designs. I have used jQuery for this purpose. do try it and leave me a feedback.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Demo Page</title>
    
        <script type="text/javascript" src="jquery-1.4.2.js"></script>
    
        <script type="text/javascript">
        
        $(document).ready( function () {
        
            $("#tbl tr td").mouseover( function () {
                var ids = $(this).attr("id");
                var vals = parseInt(ids.substring(ids.length-2,ids.length-1));
                if(vals>=1)
                {
                    vals--;
                    var newid = ids.substring(0,3)+vals+ids.substring(ids.length-1,ids.length);
                    $("#text1").attr("value",$("#"+ids).attr("innerHTML"));
                    $("#text2").attr("value",$("#"+newid).attr("innerHTML"));
                }
                else if(vals<=0)
                {
                    $("#text1").attr("value",document.getElementById(ids).innerHTML);
                      $("#text2").attr("value",0);
                }
            });
            
        });
        
        </script>
    
    </head>
    <body>
        <div id="d1">
            asdf
        </div>
        <table id="tbl" border="1">
            <tr>
                <td id="col00">
                    0
                </td>
                <td id="col01">
                    1
                </td>
                <td id="col02">
                    2
                </td>
            </tr>
            <tr>
                <td id="col10">
                    3
                </td>
                <td id="col11">
                    4
                </td>
                <td id="col12">
                    5
                </td>
            </tr>
            <tr>
                <td id="col20">
                    6
                </td>
                <td id="col21">
                    7
                </td>
                <td id="col22">
                    8
                </td>
            </tr>
        </table>
        <br />
        <br />
        <input id="text1" type="text" />
        <input id="text2" type="text" />
    </body>
    </html>
    In case of any further queries, do checkout my blog at : http://www.dsaravanan.wordpress.com/javascript/

    Regards,

    d_s.

    Quote Originally Posted by rpjd View Post
    I currently have a table where the current cell (cursor hover) is highlighted along with the top cell in that column and first cell in row. I want to assign the values in these cells to input text fields. The first column cell is identified by Col1Cell[0] where Cell is the top table data cell of the current column.
    I can access the value of the cell by Col1Cell[0].innerHTML But when I try to assign this value to a text field nothing happens.
    I have
    Code:
    document.getElementById("tableID").fieldID.value = Col1Cell[0].innerHTML
    Any ideas?
    regards

    d_s.

  • #3
    Regular Coder
    Join Date
    Apr 2007
    Posts
    123
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have no understanding of JQuery. I'm familiar with javascript, somewhat at least. My table cells have no individual id's, I'm using getElementsByTagName to access the <th> and <td> tags, then using a for loop to iterate through them. When I've found the necessary <th> or first column <td> I change the style of the cell. While I have access to the cell in question, I want to assign the contents of the cell to a text field outside the table. I'm hoping javascript can accomplish this task.
    Col1Cell[0] // first cell in row of current cell
    Header[n] // cell in top row and column[n] of current cell
    Col1Cell[0].innerHTML // accesses contents of first cell in current row.
    Header[n].innerHTML // accesses contents of cell [n] in top row of of current column.
    I was thinking this would work:
    Code:
    Col1Cell[o].innerHTML = document.getElementById("tableID").textfieldID.value;
    Ive tested the innerHTML with an alert and it shows the contents. I can't see why the assignment part won't work. Any help appreciated.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •