脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 手动给表增加数据

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

 更新时间：2013年07月10日 11:05:18   作者：  
这篇文章介绍了js手动给表增加数据的实例代码，有需要的朋友可以参考一下
 先建一个页面如下：这里有两个表，上面一个有数据，下面一个没有数据，只有一个表头！
 
复制代码 代码如下:

 <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中！
您可能感兴趣的文章:

相关文章

  • 手把手教你写一个微信小程序（推荐）

    手把手教你写一个微信小程序（推荐）

    最近接了一个微信小程序的项目，项目需求是小程序语音识别，全景图片观看，登录授权，获取个人基本信息。非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-10-10
  •  JavaScript 数据结构之散列表的创建(2)

     JavaScript 数据结构之散列表的创建(2)

    这篇文章主要介绍了 JavaScript 数据结构之散列表的创建，主要看如何处理散列值冲突的问题，并实现更完美的散列表。下文详细介绍需要的小伙伴可以参考一下
    2022-04-04
  • JS图片压缩（pc端和移动端都适用）

    JS图片压缩（pc端和移动端都适用）

    本文主要分享了JS图片压缩的方法。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • JS截取字符串实例详解

    JS截取字符串实例详解

    这篇文章主要介绍了JS截取字符串的方法,结合实例形式较为详细的分析了JavaScript截取字符串的常用函数与具体使用技巧,并附带说明了JS截取字符串substr和substring方法的区别,需要的朋友可以参考下
    2015-11-11
  • js表头排序实现方法

    js表头排序实现方法

    这篇文章主要介绍了js表头排序实现方法,涉及数字、字母、字符串比较及排序等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • javascript实现富文本框选中对齐的思路与代码

    javascript实现富文本框选中对齐的思路与代码

    最近在项目中经常遇到使用富文本框的情况,下面这篇文章主要给大家介绍了关于javascript实现富文本框选中对齐的思路与代码,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • JS基于FileSystemObject创建一个指定路径的TXT文本文件

    JS基于FileSystemObject创建一个指定路径的TXT文本文件

    这篇文章主要介绍了JS基于FileSystemObject创建一个指定路径的TXT文本文件,涉及javascript使用ActiveXObject控件中FileSystemObject对象模型的基本技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 微信浏览器内置JavaScript对象WeixinJSBridge使用实例

    微信浏览器内置JavaScript对象WeixinJSBridge使用实例

    这篇文章主要介绍了微信浏览器内置JavaScript对象WeixinJSBridge使用实例,本文给出了分享到朋友圈、发送给好友、分享到腾讯微博、关注指定的微信号等功能代码,需要的朋友可以参考下
    2015-05-05
  • 也说JavaScript中String类的replace函数

    也说JavaScript中String类的replace函数

    最近读了sharpxiajun的博文《javascript笔记--String类replace函数的一些事》，感觉写的很好，很有帮助。
    2011-09-09
  • 详解操作cookie的原生方法cookieStore

    详解操作cookie的原生方法cookieStore

    我们平时对 cookie 的增删改查等操作，都是在操作document.cookie，这里我们介绍一个新方法cookieStore。
    2021-05-05

最新评论