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

这篇文章介绍了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中!

时间: 2024-12-27 13:02:49

javascript 手动给表增加数据的小例子的相关文章

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

 先建一个页面如下:这里有两个表,上面一个有数据,下面一个没有数据,只有一个表头!  复制代码 代码如下:  <body>     <form id="form1" runat="server">     <div>     <table border='1px' width="500px" id="tables">     <tr>     <td>1&

JavaScript设置首页和收藏页面的小例子_javascript技巧

复制代码 代码如下: <html>    <head>       <title>JavaScript设置首页和收藏页面(兼容IE和火狐)</title>       <script>       //url:要收藏的链接:title:收藏项的名称       function AddFavorite(url,title)       {          //如果url或者title为空,默认为当前页面url和title.          i

Jquery通过Ajax访问XML数据的小例子_jquery

页面js代码 复制代码 代码如下: $.ajax({ url : '...',type : 'POST',dataType : 'xml',error : function(xml) {alert("Error loading XML document" + xml);},success : function(xml) {$(xml).find("X").each(function(i) {alert($(this).attr("Xattr"))

js遍历、动态的添加数据的小例子_javascript技巧

复制代码 代码如下: function jsonObj(){     var person= {name: 'zhangsan',pass: '123' ,'sni.ni' : 'XMQ',back:function (){         for(var i=0;i<arguments.length;i++){         //在不知参数个数情况下可通过for循环遍历         // arguments这个是js 默认提供         alert("arr["+i

javascript中日期转换成时间戳的小例子_javascript技巧

复制代码 代码如下: /*** 日期转化成时间戳* 日期格式 2011-02-02 21:12:13* time_str:日期段 2011-02-02* fix_time:时间段 21:12:13*/function strtotime(time_str, fix_time) {var time = (new Date()).getTime(); if(time_str) {//有日期段var str = time_str.split('-');if (3 === str.length) {va

c语言读取obj文件转换数据的小例子_C 语言

复制代码 代码如下: // hello.cpp : Defines the entry point for the console application.// #include "stdafx.h"#include "stdio.h" int _tmain(int argc, _TCHAR* argv[]){    FILE *file1,*file2;    file1=fopen("047facesmall.obj","r&quo

详解JavaScript中的表单验证_基础知识

 表单验证用于发生在服务器,客户端已经输入所有必要的数据,然后按下提交按钮之后.如果一些已被输入的客户端的数据的已在错误形式或者被简单地丢失,则服务器将必须的所有数据发送回客户端,并请求的形式以正确的信息重新提交.这是一个漫长的过程,会增加服务器负担. JavaScript中,提供了一种方法将其发送到web服务器之前验证客户端的计算机上的形式的数据.表单验证通常执行两种方式.     基本验证 - 首先,该表必须进行检查,以确保数据输入的需要将其每一个表单字段.这将通过表格的每个字段只需要循环,

详解JavaScript中的表单验证

       这篇文章主要介绍了JavaScript中的表单验证,是JS在前端和服务器端通信部分相关的重要知识,需要的朋友可以参考下             表单验证用于发生在服务器,客户端已经输入所有必要的数据,然后按下提交按钮之后.如果一些已被输入的客户端的数据的已在错误形式或者被简单地丢失,则服务器将必须的所有数据发送回客户端,并请求的形式以正确的信息重新提交.这是一个漫长的过程,会增加服务器负担.         JavaScript中,提供了一种方法将其发送到web服务器之前验证客户端

用JavaScript动态建立或增加CSS样式表的实现方法_javascript技巧

1.简单的方法,不管不顾,直接这样就可以: document.createStyleSheet().cssText = '标签{color:red;' + // 这个注释只在当前JS中帮助理解,并不会写入CSS中 'width:300px;height:150px}' + '.类名{--}' + '#ID们{--}' ;  //完活.我喜欢分号这样写,和指令书写的起始位置对齐比较好一点,尤其是后面有其它语句的时候. 2.完善一点的方法,防止重复添加,可以通过添加样式表ID并对其判断来实现: if