javascript 手动给表增加数据的小例子


Posted in Javascript onJuly 10, 2013

 先建一个页面如下:这里有两个表,上面一个有数据,下面一个没有数据,只有一个表头!
 

 <body>
     <form id="form1" runat="server">
     <div>
     <table border='1px' width="500px" id="tables">
     <tr>
     <td>1</td><td><input type="text" value="20"  style="width:50px" /><input type="text" value="200"style="width:50px" /></td><td>我是中国人</td><td>好好学习</td><td><input type="button" id="but" value="新增" onclick="butd(this);" /></td>
     </tr>
      <tr>
      <td>2</td><td><input type="text" value="30"style="width:50px" /><input type="text" value="300"style="width:50px" /></td><td>我是中国人</td><td>好好学习</td><td><input type="button" id="Button1" value="新增" onclick="butd(this);" /></td>
      </tr>
       <tr>
        <td>3</td><td><input type="text" value="40" style="width:50px" /><input type="text" value="400" style="width:50px"/></td><td>我是中国人</td><td>好好学习</td><td><input type="button" id="Button2" value="新增" onclick="butd(this);" /></td>
       </tr>
        <tr>
      <td>4</td><td><input type="text" value="50" style="width:50px" /><input type="text" value="500"style="width:50px" /></td><td>我是中国人</td><td>好好学习</td><td><input type="button" id="Button3" value="新增" onclick="butd(this);" /></td>
        </tr>
         <tr>
        <td>5</td><td><input type="text" value="60" style="width:50px" /><input type="text" value="600"style="width:50px" /></td><td>我是中国人</td><td>好好学习</td><td><input type="button" id="Button4" value="新增" onclick="butd(this);" /></td>
         </tr>
     </table>
     </div>
     <div>
       <table border='1px' width="500px" id="table2">
       <tr><td>ID</td><td>年龄</td><td>金钱</td><td>名字</td></tr>
       </table>
     </div>
     </form>
 </body>

现在点击新增按钮,把点中的当前行的数据动态的加到下面的TABLE中,javascipt代码如下:
<script type="text/javascript">
        function butd(rows) {
            var rows = rows.parentNode.parentNode.rowIndex    //找到当前选中的行
            var mytable = document.getElementById('tables');  //找到当前这个 table;
            var Romm_price = mytable.rows[rows].cells[0].innerText; //找到当前行的第一列的值
            var room_rows = mytable.rows[rows].cells[1].children[0].value; //找到当前行的第二列第一个文本框的值;
            var room_rows2 = mytable.rows[rows].cells[1].children[1].value; //找到当前行的第二列第二个文本框的值;
            var room_rows3 = mytable.rows[rows].cells[2].innerText; //找到当前行的第三列的值;
            //找到table2,并给table2新增一行
            var x = document.getElementById('table2').insertRow();
            x.align = "center";  //设置行样式
            var Romm_typename = x.insertCell(0);
            var txtDate = x.insertCell(1);
            var Guest_Type_ID = x.insertCell(2);
            var room_row = x.insertCell(3);
            Romm_typename.innerHTML = Romm_price;
            txtDate.innerHTML = room_rows;
            Guest_Type_ID.innerHTML = room_rows2;
            room_row.innerHTML = room_rows3;
        }
    </script>

这个里面最重要的就是如何得到当前你点击是哪行,然后是如何手动的把当前行的数据加到table中!
Javascript 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
详解JavaScript 作用域
Jul 14 Javascript
基于javascript 闭包基础分享
Jul 10 #Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 #Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 #Javascript
浅析js封装和作用域
Jul 09 #Javascript
js正则表达式的使用详解
Jul 09 #Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 #Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 #Javascript
You might like
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
php文件上传的简单实例
2013/10/19 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
python使用7z解压apk包的方法
2015/04/18 Python
浅谈Python中数据解析
2015/05/05 Python
Python实现统计单词出现的个数
2015/05/28 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
职务任命书范本
2014/06/05 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python