Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

excel like effect, easier than it sounds 3

Status
Not open for further replies.
codeone

codeone

Programmer
Mar 25, 2003
343
US
ok, this is easy, because the effect I want to mimick is the input effect. If familuar, when you input values into excel cells you have to first dbl click the field to make it active and when you dbl click another filed the previous field becomes inactive and displays the value.

How to mimick this with Jscript (therory):
you make a table, in one cell, you encode a textbox, name the textbox and hide it. Ondblclick of the cell the textbox appears and you can then type in it. when you dbl click another text box (field) the previous textbox hides and passes it's value to the cell it resides in. Easy!!!!

So, my question is:

How do I pass a textboxes value to a table cell? I tried:

Code: 
<script>
function excel(){
document.alpha.txt1.style.visibility="hidden";
document.getElementById("pid1").innerHtml=document.alpha.txt1.value;
}
</script>

but it didn't work... like always help is much appreciated!

thanks

co

__________________________________________________________
"The only difference between me and a mad man is that I'm not mad."
- Dali
 
Sort by date Sort by votes

Remember Javascript is case-sensitive.

You should replace this:

Code: 
innerHtml

With this:

Code: 
innerHTML

Hope this helps,
Dan
 
Upvote 0 Downvote
rather than bothering with hidden elements, why not just modify "readonly" attribute?
Code: 
<html>
  <head>
    <title>test</title>
    <script type="text/javascript">
      function edit(cell) {
        if (self.prevCell) {
          self.prevCell.setAttribute("readonly", "readonly");
          self.prevCell.className = "readonly";
        }
        cell.removeAttribute("readonly");
        cell.className = "editable";
        
        self.prevCell = cell;
      }
    </script>

    <style type="text/css">
      .readonly {
        border:1px solid buttonface;
      }
      .editable {
        border:1px inset buttonface;
      }
    </style>
  </head>

  <body>
    <form>
      <table>
        <tr>
          <td>
          <input
            type="text"
            name="a1"
            value="a1"
            ondblclick="edit(this);"
            readonly="readonly"
            class="readonly" />
          </td>
          <td>
          <input
            type="text"
            name="b1"
            value="b1"
            ondblclick="edit(this);"
            readonly="readonly"
            class="readonly" />
          </td>
        </tr>
        <tr>
          <td>
          <input
            type="text"
            name="a2"
            value="a2"
            ondblclick="edit(this);"
            readonly="readonly"
            class="readonly" />
          </td>
          <td>
          <input
            type="text"
            name="b2"
            value="b2"
            ondblclick="edit(this);"
            readonly="readonly"
            class="readonly" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
 
Upvote 0 Downvote
@ Jemminger:

Wow, that idea was way better!! Looks better, and probably is crossbrowser compatible, although thats not important but still a plus, great idea, thanks alot!!

@BillyRayPreachersSon:
hey didn't know the innerHTML thing was case sensitive, leanrt something knew!!! Thanks alot!!!

@simonchristieis:
nice to meet you, is the iid name I chose invalid because of the name or is the id concept just not going to work with a table cell? anyway, thanks alot for the input and help!!!

@ all:
star!!!!

__________________________________________________________
"The only difference between me and a mad man is that I'm not mad."
- Dali
 
Upvote 0 Downvote
just in case your wondering the script does not actually work, it basically is eye candy, and the readonly attribute does not toggle, basically it just toggles threw classes which make the effect of active/inactive fields like in excel, which is cool but worthless if you cant edit the field, plus since the css thing is going on it still is not cross browser, which is a correction to above, I didnt really look at the script that well, or test it before posting a reply...

anyway, doesnt work, so back to square one, how to pass data from textbox to table cell...

all help is appreciated,

thanks

__________________________________________________________
"The only difference between me and a mad man is that I'm not mad."
- Dali
 
Upvote 0 Downvote
hooray, I got it!!! I married my script with jemmingers and the after birth resulted to this:

Code: 
<script>
function excel(cell){
document.alpha.txt1.style.visibility="hidden";
document.getElementById("pid1").innerHTML=document.alpha.txt1.value;
}
</script>

works great!!!

__________________________________________________________
"The only difference between me and a mad man is that I'm not mad."
- Dali
 
Upvote 0 Downvote
dangit correction: for sake of not looking stupid let me correct my script and my post again!!
Code: 
<script>
function excel(){
document.alpha.txt1.style.visibility="hidden";
document.getElementById("pid1").innerHTML=document.alpha.txt1.value;
}
</script>
no need for the object thing, so basically I just used billyraypreacherson's advice and captalized the HTML thing, so now it works... sorry for the multi posts

__________________________________________________________
"The only difference between me and a mad man is that I'm not mad."
- Dali
 
Upvote 0 Downvote
ok since this thread became one useless piece of bandwidth, I figured I outta post the entire working code, for those who wish to follow in my foot steps...;)

Code: 
<html>
<head>
<title>test</title>
<script type="text/javascript">
function edit(cell) {
if (self.prevCell) {
self.prevCell.setAttribute("readonly", "readonly");
self.prevCell.className = "readonly";
}
cell.removeAttribute("readonly");
cell.className = "editable";

self.prevCell = cell;
}
function lock_it(theField) {  
theField.readOnly = !theField.readOnly;
}
</script>
</head>
<style type="text/css">
.readonly {
border:1px solid buttonface;
}
.editable {
border:1px inset buttonface;
}
</style>
<body>
<form name="alpha">
<table>
<tr>
<td>
<input type="text" name="a1" value="a1" onclick="lock_it(this.form.a1);edit(this)" class="readonly" readonly>
</td>
<td>
<input type="text" name="b1" value="b1" onclick="lock_it(this.form.b1);edit(this)" class="readonly" readonly>
</td>
</tr>
<tr>
<td>
<input type="text" name="a2" value="a2" onclick="lock_it(this.form.a2);edit(this)" class="readonly" readonly>
</td>
<td>
<input type="text" name="b2" value="b2" onclick="lock_it(this.form.b2);edit(this)" class="readonly" readonly>
</td>
</tr>
</table>
</form>
</body>
</html>

excel like, ooooooohhhhhhhwaaaaaaahhhhhhhhhh


__________________________________________________________
"The only difference between me and a mad man is that I'm not mad."
- Dali
 
Upvote 0 Downvote
codeone,

fyi: to make a field readonly, you must SET an attribute called "readonly". to make a readonly field editable, you must REMOVE the "readonly" attribute. you cannot set "element.readOnly = false;"...there is no "readOnly" property.



=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
 
Upvote 0 Downvote
well, i stand corrected: removing the "readonly" attribute does not work in IE. frankly does not suprise me with all IE's other annoying quirks.

=========================================================
-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
 
Upvote 0 Downvote
hey dont feel bad man, your help got me to the answer so it's cool man, thanks alot for your help!!

have a good day

codeone

__________________________________________________________
"The only difference between me and a mad man is that I'm not mad."
- Dali
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

gmart
  • Locked
  • Question
New to JS. Working with it in goog
Replies
2
Views
83
wp1
wp1
rogerte
  • Locked
  • Question
How to set/get a bootstrap select items index
Replies
1
Views
307
vacunita
vacunita
southbeach
  • Locked
  • Question
jQuery jAlert Plugin - Cannot get it to work ...
Replies
1
Views
73
southbeach
southbeach
jaguar15
  • Locked
  • Question
How to parse xml key name and its value using javascript?
Replies
0
Views
72
jaguar15
jaguar15
jaguar15
  • Locked
  • Question
How to append/save pairs of data into dynamic javascript array and pass it to second function?
Replies
1
Views
76
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top