Change cell table into text box when clicked

Question

I'm having trouble with my code. The text area should appear when a user clicks on a cell table. The text area appears when it is clicked but it always appears on the first cell. I want the text area to appear exactly where the cell appears. (The values in the table are retrieved from a database)..

<?php
session_start();

if(!isset($_SESSION['key']))
{
    header("location:index.php");   
}

    include"connect.php";?>
   <html>
    <head>
       <title>All Records</title>   
       <style>
        table{ text-align:justified;}
        a {text-decoration:none;
           color:black;
        }
        .replace {display:none;}
   </style>
   <script type="text/javascript">
       function exchange(el){
        var ie=document.all&&!document.getElementById? document.all : 0;
        var toObjId=/b$/.test(el.id)? el.id.replace(/b$/,'') : el.id+'b';
        var toObj=ie? ie[toObjId] : document.getElementById(toObjId);

        if(/b$/.test(el.id))  
        toObj.innerHTML=el.value;
        else{
        toObj.style.width=el.offsetWidth+7+'px';
        toObj.value=el.innerHTML;
        }
        el.style.display='none';
        toObj.style.display='inline';
        }
      </script>
</head>
   <body>


   <?php 
     echo "<table border=1 id='records' >";
     echo "<tr><th class='data' rowspan='2' ><strong>EMPLOYEE</strong></th>";
     echo "<th class='data' rowspan='2'>DATE</th>
                <th colspan='2'>AM</th>
                <th colspan='2'>PM</th>
                <th colspan='2'>OVERTIME</th></tr>";
     echo "<tr>
        <th>Arrival</th>
        <th>Departure</th>  
        <th>Arrival</th>
        <th>Departure</th>
        <th>In</th>
        <th>Out</th>
       </tr>";


   $query="SELECT 
   employee_detail.employee_code,
   employee_detail.lname,
   employee_detail.fname,
   employee_detail.mname,
   employee_record.date,
   employee_record.am_in,
   employee_record.am_out,
   employee_record.pm_in,
   employee_record.pm_out,
   employee_record.over_in,
   employee_record.over_out
   FROM employee_detail INNER JOIN employee_record ON
   employee_record.employee_code=employee_detail.employee_code ORDER BY id DESC ";

   $result=mysql_query($query);
   $affected=mysql_affected_rows();

   while($affected>=1&&$row=mysql_fetch_array($result))
   {
     echo '<tr><td><a href="edit.php?id2='.$row['employee_code'].'" name="edit">';
     echo $row['lname'].",&nbsp";
     echo $row['fname']."&nbsp";
     echo $row['mname']."</a></td>"; 
     echo '<td>'.$row['date'].'</td>';
     echo '<td><span id="itm1" onclick="exchange(this);">'.$row['am_in'].'</span>                  
     <textarea ondblclick="exchange(this);" id="itm1b" class="replace" type="text" 
     value='.$row['am_in'].'></textarea></td>';
     echo '<td>'.$row['am_out'].'</td>';
     echo '<td>'.$row['pm_in'].'</td>';
     echo '<td>'.$row['pm_out'].'</td>';
     echo '<td>'.$row['over_in'].'</td>';
     echo '<td>'.$row['over_out'].'</td>';
     $affected--;
   }     
     echo "</tr></table>";
   ?>

   </body>
   </html>

score 0 · Answer 1 · answered Oct 22 '12 at 03:58

0

The fact that the first <textarea> is always the one that appears makes it sound like your code is functioning properly, but because you're generating multiple elements with identical id attributes, it's targeting the first matching element instead of the one nearest where you click.

Make each id unique (which is actually a requirement for validity) by appending that result's 'employee_code' value (which is presumably a primary key in the database):


    echo '<td&gt';

    echo   '<span id="itm"' . $row['employee_code'] . '" ';
    echo   'onclick="exchange(this);">';
    echo   $row['am_in'];
    echo   '</span>';

    echo   '<textarea ondblclick="exchange(this);" id="itm';
    echo   $row['employee_code'] . 'b" class="replace" type="text" ';
    echo   'value=' . $row['am_in'] . '>';
    echo   '</textarea>'

    echo '</td>';

answered Oct 22 '12 at 03:58

cml

101
2

@user1758736 RE: your 'answer' below - `id` attributes must begin with a letter: [link](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) – cml Oct 22 '12 at 05:48
sorry for that...i have another question, can i pass the php values to a variable then assign that variable to be the id of span and textarea? thanks for answering my questions... – roseanne Oct 22 '12 at 05:55
The 2nd and 6th-7th lines in the above code block should result in element `id`s of "itm1234" and "itm1234b" respectively, where the `employee_code` is "1234". There shouldn't be a need to pass the php value to a separate variable, because you are directly outputting HTML markup. If you would prefer to use some other values, just replace the `$row['employee_code']` in those two locations with the name of the variable you want to use. – cml Oct 22 '12 at 06:02
i tried to add the code you've given, but i'm getting no results..the cell doesn't change into a textarea after it has been clicked..Can u tell me why? (sorry if i'm annoying..i'm annoyed by myself too ^^,) – roseanne Oct 22 '12 at 06:13
i have tried another method to this but i'm also having trouble with it. Can you take a look at it? thanks [link](http://stackoverflow.com/questions/13004833/how-to-exit-text-box-after-clicking-outside-the-cell) – roseanne Oct 22 '12 at 06:19

score 0 · Answer 2 · answered Oct 22 '12 at 05:40

can i use a php value as the id of the span and the text area instead?

  echo '<td>';
  echo   '<span id='.$row['employee_code'] . ' onclick="exchange(this);">'.$row['am_in'].'</span>';
  echo '<textarea ondblclick="exchange(this);" id='.$row['employee_code']. ' class="replace" type="text" value=' . $row['am_in'] .' >'. $row['am_in'] . '</textarea>';
  echo '</td>

Change cell table into text box when clicked

2 Answers2