td中文本框输入时宽度增加，离开焦点恢复正常宽度jquery

[害羞的大叔]

td中有一个文本框，由于要输入内容比较多，但td宽度有限，考虑做成点击正常宽度文本框后，文本框宽度增加浮到td上方，离开焦点后恢复文本框恢复正常大小放回td中。求指导。

[留校_察看]

<style>
	*{margin:0 auto;padding: 0;font: 12 "宋体"}
	table input{position: absolute;top:0;left:0;background: #fff;border:1px solid #000;z-index:1;width: 60px}
	table{border-collapse:collapse; }
	table td{position: relative;width: 60px}

</style>
<table border="1">
  <tr>
    <td><input type="text" id="input"></td>
    <td>213123</td>
  </tr>
  <tr>
    <td>123123</td>
    <td>123123</td>
  </tr>
</table>
<script>
	var i = document.getElementById('input'),
	i_w = i.style.width;
	i.onfocus=function(){
		this.style.width=80
	}
	i.onblur=function(){
		this.style.width=i_w;
	}
</script>

[留校_察看]

如果是要渐变效果，就用jq的animate函数

[害羞的大叔]

[quote=引用 1 楼 zgxjj 的回复:] 谢谢回答，祝周末愉快