求随着输入框输入数值改变，表格也立即改变的效果

请看以下代码，我想要在输入框输入颜色代码、表格的宽高度等，表格就会立即随输入而改变，变色什么的。不需要再点什么按钮
请根据下面我给出的代码来修改，最好不只是键盘输入才能响应，最好是鼠标粘贴内容到输入框也能响应得到
应该是要用到document.getElementById这些的，可就是不会写，求各位高手帮忙啊<form method="POST" action="">
<p>表格背景颜色: #<input type="text" name="bgcolor" size="8" value="EFEFEF"></p>     
<p>表格边框颜色: #<input type="text" name="bordercolor" size="8" value="999999"></p>     
<p>表格文字颜色: #<input type="text" name="fontcolor" size="8" value="0000FF"></p>     
<p>表格宽度: <input type="text" name="twidth" size="5" value="468">px</p>     
<p>表格高度: <input type="text" name="theight" size="5" value="60">px</p>     
</form><table border="0" width="468" height="60" style="border: 1px solid #999999">
  <tr>
    <td width="100%" align="center" bgcolor="#EFEFEF"><font color="#0000FF">文字文字文字文字文字文字</font></td>
  </tr>
</table>

解决方案 »

  1.   


    <html>
    <head><script>
    function changeBGColor(obj)
    {var tab=document.getElementById("tab");
    tab.style.backgroundColor="#"+obj.value;
    }
    function changeBOColor(obj)
    {var tab=document.getElementById("tab");
    tab.style.borderColor="#"+obj.value;
    }
    </script>
    </head>
    <body>
    <form method="POST" action="">
    <p>表格背景颜色: #<input type="text" name="bgcolor" onChange="changeBGColor(this);" size="8" value="EFEFEF"></p>     
    <p>表格边框颜色: #<input type="text" name="bordercolor" size="8" onChange="changeBOColor(this);"value="999999"></p>     
    <p>表格文字颜色: #<input type="text" name="fontcolor" size="8" value="0000FF"></p>     
    <p>表格宽度: <input type="text" name="twidth" size="5" value="468">px</p>     
    <p>表格高度: <input type="text" name="theight" size="5" value="60">px</p>     
    </form><table id="tab" border="0" width="468" height="60" style="border: 1px solid #999999">
      <tr>
        <td width="100%" align="center" bgcolor="#EFEFEF"><font color="#0000FF">文字文字文字文字文字文字</font></td>
      </tr>
    </table>
    </body>
    </html>随便写了个  抛砖引玉吧  方法基本一样 
      

  2.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    function foo(){
    var $o=$('#ftable');
    try{$o.css({'background-color':$('input[name="bgcolor"]').val()});}catch(e){}
    try{$o.css({'border-color':$('input[name="bordercolor"]').val()});}catch(e){}
    try{$o.css({'color':$('input[name="fontcolor"]').val()});}catch(e){}
    try{$o.css({'width':$('input[name="twidth"]').val()});}catch(e){}
    try{$o.css({'height':$('input[name="theight"]').val()});}catch(e){}
    }
    $(function(){
        $('input').click(function(){
    foo();
    }).change(function(){
    foo();
    }).blur(function(){
    foo();
    }).dblclick(function(){
    foo();
    }).focus(function(){
    foo();
    }).keydown(function(){
    foo();
    }).keypress(function(){
    foo();
    }).keyup(function(){
    foo();
    }).select(function(){
    foo();
    }).mouseover(function(){
    foo();
    }).mouseout(function(){
    foo();
    })
    })
    //]]>
    </script>
    <style type="text/css">
    button {position:absolute; left:0; top:0}
    </style>
    </head>
    <body>
    <form method="POST" action="">
    <p>表格背景颜色: #<input type="text" name="bgcolor" size="8" value="EFEFEF"></p>     
    <p>表格边框颜色: #<input type="text" name="bordercolor" size="8" value="999999"></p>     
    <p>表格文字颜色: #<input type="text" name="fontcolor" size="8" value="0000FF"></p>     
    <p>表格宽度: <input type="text" name="twidth" size="5" value="468">px</p>     
    <p>表格高度: <input type="text" name="theight" size="5" value="60">px</p>     
    </form>
    <table border="0" width="468" height="60" id="ftable">
      <tr>
        <td width="100%" align="center">文字文字文字文字文字文字</td>
      </tr>
    </table>
    </body>
    </html>
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <SCRIPT LANGUAGE="JavaScript">
      <!--
    //回车键响应事件
    function showkey() {
    if (event.keyCode == 13 && event.srcElement.tyle != "button") {
    event.keyCode = 9;
    }
    }
    document.onkeydown = showkey;
    //背景颜色
    function show() {
    document.getElementById("a2").bgColor = document.inputForm.bgcolors.value;
    }
    //边框颜色
    function showClose() {
    document.getElementById("a1").style.borderColor = document.inputForm.bordercolor.value;
    }
    //文字颜色
    function showColor() {
    document.getElementById("a3").style.color=document.inputForm.fontcolor.value;
    }
    //表格宽度
    function showWidth() {
    document.getElementById("a1").style.width = document.inputForm.theight.value + "px";
    }
    //表格高度
    function showHeight() {
    document.getElementById("a1").style.height = document.inputForm.theight.value + "px";
    }  //-->
      </SCRIPT>
     </HEAD> <BODY>
      <form method="POST" action="" name="inputForm">
    <p>表格背景颜色: #<input type="text" name="bgcolors" size="8" value="#CCFF33" onBlur="show()"></p>     
    <p>表格边框颜色: #<input type="text" name="bordercolor" size="8" value="#FF0099" onBlur="showClose()"></p>     
    <p>表格文字颜色: #<input type="text" name="fontcolor" size="8" value="#993399" onBlur="showColor()"></p>     
    <p>表格宽度: <input type="text" name="twidth" size="5" value="600" onBlur="showWidth()">px</p>     
    <p>表格高度: <input type="text" name="theight" size="5" value="100" onBlur="showHeight()">px</p>     
    </form><table border="0" width="468" height="60" style="border: 1px solid #999999" id="a1">
      <tr>
        <td width="100%" align="center" bgcolor="#EFEFEF" id="a2"><font color="#0000FF" id="a3">文字文字文字文字文字文字</font></td>
      </tr>
    </table>
     </BODY>
    </HTML>
      

  4.   

    说名下！~
    改变背景颜色，你的td设置了颜色所以要用到a1的话背影颜色会被td所覆盖
    ，如果要想用a1做背景颜色要把td的bgcolor="#EFEFEF"去掉
      

  5.   

    <form method="POST" action="">
    <p>表格背景颜色: #<input type="text" name="bgcolor" size="8" value="EFEFEF"></p>     
    <p>表格边框颜色: #<input type="text" name="bordercolor" size="8" value="999999"></p>     
    <p>表格文字颜色: #<input type="text" name="fontcolor" size="8" value="0000FF"></p>     
    <p>表格宽度: <input type="text" name="twidth" size="5" value="468">px</p>     
    <p>表格高度: <input type="text" name="theight" size="5" value="60">px</p>     
    </form><table border="0" width="468" height="60" style="border: 1px solid #999999">
      <tr>
        <td width="100%" align="center" bgcolor="#EFEFEF"><font color="#0000FF">文字文字文字文字文字文字</font></td>
      </tr>
    </table>
    <script>
    window.onload=function(){
        var tbl=document.getElementsByTagName("table")[0];
        var input=document.getElementsByTagName("form")[0].getElementsByTagName("input");
        
        //表格背景颜色
        input[0].onchange=function(){tbl.rows[0].cells[0].setAttribute("bgColor",this.value);};
        //表格边框颜色
        input[1].onchange=function(){tbl.style.borderColor=this.value;};
        //表格文字颜色
        input[2].onchange=function(){tbl.rows[0].cells[0].getElementsByTagName("font")[0].setAttribute("color",this.value);};
        //表格宽度
        input[3].onchange=function(){tbl.style.width=this.value;};
        //表格高度
        input[4].onchange=function(){tbl.style.height=this.value;};
        
    };
    </script>
      

  6.   

    没有什么好写的，一个是change事件，另一个就是赋值
      

  7.   

    <form method="POST" action="">
    <p>表格背景颜色: #<input type="text" name="bgcolor" size="8" value="EFEFEF"></p>     
    <p>表格边框颜色: #<input type="text" name="bordercolor" size="8" value="999999"></p>     
    <p>表格文字颜色: #<input type="text" name="fontcolor" size="8" value="0000FF"></p>     
    <p>表格宽度: <input type="text" name="twidth" size="5" value="468">px</p>     
    <p>表格高度: <input type="text" name="theight" size="5" value="60">px</p>     
    </form><table border="0" width="468" height="60" style="border: 1px solid #999999">
      <tr>
        <td width="100%" align="center" bgcolor="#EFEFEF"><font color="#0000FF">文字文字文字文字文字文字</font></td>
      </tr>
    </table>
    <script>
    window.onload=function(){
        var tbl=document.getElementsByTagName("table")[0];
        var input=document.getElementsByTagName("form")[0].getElementsByTagName("input");
        
        //表格背景颜色
        input[0].onchange=input[0].onpaste=function(){tbl.rows[0].cells[0].setAttribute("bgColor",this.value);};
        //表格边框颜色
        input[1].onchange=input[1].onpaste=function(){tbl.style.borderColor=this.value;};
        //表格文字颜色
        input[2].onchange=input[2].onpaste=function(){tbl.rows[0].cells[0].getElementsByTagName("font")[0].setAttribute("color",this.value);};
        //表格宽度
        input[3].onchange=input[3].onpaste=function(){tbl.style.width=this.value;};
        //表格高度
        input[4].onchange=input[4].onpaste=function(){tbl.style.height=this.value;};
        
    };
    </script>
      

  8.   

    代码不难，就是触发文本框的事件。然后将值设置到table中即可！
      

  9.   

    onpropertychange
    IE only<form method="POST" action="">
    <p>表格背景颜色: #<input type="text" size="8" value="EFEFEF" onpropertychange="tab.rows[0].cells[0].bgColor = '#'+ this.value"></p>
    <p>表格边框颜色: #<input type="text" size="8" value="999999" onpropertychange="changeborder(this.value)"></p>
    <p>表格文字颜色: #<input type="text" size="8" value="0000FF" onpropertychange="tab.rows[0].cells[0].firstChild.color = '#'+ this.value"></p> 
    <p>表格宽度: <input type="text" size="5" value="468" onpropertychange="tab.style.width = this.value +'px'">px</p>
    <p>表格高度: <input type="text" size="5" value="60" onpropertychange="tab.style.height = this.value +'px'">px</p>
    </form><table border="0" width="468" height="60" style="border: 1px solid #999999">
      <tr>
        <td width="100%" align="center" bgcolor="#EFEFEF"><font color="#0000FF">文字文字文字文字文字文字</font></td>
      </tr>
    </table>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var tab = document.getElementsByTagName("table")[0];
    //若边框颜色不足六位会报错，所以转换一下
    function changeborder(color){
    if (color.length <6)
    for (var i=color.length; i<6; i++) color += "0"; //不足六位补0
    tab.style.borderColor = '#'+ color;
    }
    //-->
    </SCRIPT>
      

  10.   

    就是dom 取值赋值问题,楼主把基本语法看看应该就会了