讲到表格，我们不免都了解它的属性及用途。

colspan跨列（纵向的）和rowspan跨行（横向的）。

表格中<tr></tr>标签标示行标签；<td></td>标示列标签。

<!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>
<style type="text/css">
body{
font-size:13px;
line-height:25px;
}
table{
border-top: 1px solid #333;
border-left: 1px solid #333;
width:400px;
}
td{
border-right: 1px solid #333;
border-bottom: 1px solid #333;
text-align:center;
}
.title{
font-weight:bold;
background-color: #cccccc;
}
input text{
width:100px;
}

</style>
<script type="text/javascript">

function addRow(){
var addTable=document.getElementById("order");
var row_index=addTable.rows.length-1; //新插入行在表格中的位置
var newRow=addTable.insertRow(row_index); //插入新行
newRow.id="row"+row_index; //设置新插入行的ID

var col1=newRow.insertCell(0);
col1.innerHTML="抗疲劳神奇钛项圈";

var col2=newRow.insertCell(1);
col2.innerHTML=row_index;

var col3=newRow.insertCell(2);
col3.innerHTML="¥49.00";

var col4=newRow.insertCell(3);

var str="<input name='del"+row_index+"' type='button' value='删除' onclick=\"delRow('row"+row_index+ "')\" /> <input id='edit"+row_index+"' type='button' value='修改' onclick=\"editRow('row"+row_index+ "')\" />";
col4.innerHTML=str;
}

function delRow(rowId){
var row=document.getElementById(rowId).rowIndex; //删除行所在表格中的位置
document.getElementById("order").deleteRow(row);
}

function editRow(rowId){
var row=document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
var col=document.getElementById(rowId).cells;
var text=col[1].innerHTML;
col[1].innerHTML="<input name='num"+row+"' style='width:40px;' type='text' value='"+text+"' />";
col[3].lastChild.value="确定";
col[3].lastChild.setAttribute("onclick","upRow('"+rowId+ "')");

}

function upRow(rowId){
var row=document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
var col=document.getElementById(rowId).cells;
var text=col[1].firstChild.value;
col[1].innerHTML=text;

col[3].lastChild.value="修改";
col[3].lastChild.setAttribute("onclick","editRow('"+rowId+ "')");

}
</script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="order">
<tr class="title">
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr id="del1">
<td>防滑真皮休闲鞋</td>
<td>12</td>
<td>¥568.50</td>
<td><input name="rowdel" type="button" value="删除" onclick='delRow("del1")' />
<input id="edit1" type="button" value="修改" onclick='editRow("del1")' /></td>
</tr>
<tr>
<td colspan="4" style="height:30px;">
<input name="addOrder" type="button" value="增加订单" onclick="addRow()" /></td>
</tr>
</table>
</body>
</html>

//

JavaScript之表格修改的更多相关文章

  1. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  2. JavaScript创建表格的两种方式

    方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...

  3. Javascript合并表格相同内容单元格示例

    效果图: HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  4. JavaScript 获取和修改 内联样式

    JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...

  5. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  6. JavaScript函数内部修改全局变量的问题【一道面试题】

    JavaScript函数内部修改全局变量的问题 今天 10:44梵天莲华 | 浏览 23 次  Javascript编程语言函数 修改标签 代码如下,为什么加了 function a(){};这个函数 ...

  7. day36—javascript对表格table的操作应用（一）

    转行学开发,代码100天——2018-04-21 今天记录一下,JavaScript对表格table的操作应用,包括表格元素的获取,创建,删除等. 一个普通的完整表格包括以下几个部分:table-&g ...

  8. 重构一段基于原生JavaScript的表格绘制代码

    为了在CardSimulate项目中方便的显示技能和效果列表,决定重构以前编写的一段JavaScript代码——att表格绘制库,这段代码的作用是将特定的JavaScript数据对象转化为表格,支持精 ...

  9. 用JavaScript输出表格

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. time_t转换为DateTime

    最近解析文华财经的日线数据. 取得的第一个字段是日期,为time_t格式(long)的. 因为是用C#来写解析程序,所以要转换为DateTime的. time_t是世界时间,要转换为本地时间,所以要加 ...

  2. ssm框架查询数据并实现分页功能示例

    /** * DataGrid对象 * */ @SuppressWarnings("rawtypes") public class DataGrid { private int to ...

  3. 最小投票BZOJ 1934([Shoi2007]Vote 善意的投票-最小割)

    上班之余抽点时间出来写写博文,希望对新接触的朋友有帮助.今天在这里和大家一起学习一下最小投票 1934: [Shoi2007]Vote 好心的投票 Time Limit: 1 Sec Memory L ...

  4. php使用openssl进行Rsa长数据加密,解密保存问题

    原来代码: public function encrypt($data) { if (openssl_public_encrypt(base64_encode($data), $encrypted, ...

  5. System.exit()方法的作用

    查看java.lang.System的源码.我们能够看到System.exit()这种方法等价于Runtime.exit(),代码例如以下: /** * Terminates the currentl ...

  6. iOS开发——实用篇&提高iOS开发效率的方法和工具

    提高iOS开发效率的方法和工具 介绍 这篇文章主要是介绍一下我在iOS开发中使用到的一些可以提升开发效率的方法和工具. IDE 首先要说的肯定是IDE了,说到IDE,Xcode不能跑,当然你也可能同时 ...

  7. Objective-C语法之NSArray和NSMutableArray

    转自:http://www.cnblogs.com/stoic/archive/2012/07/09/2582773.html Objective-C的数组比C++,Java的数组强大在于,NSArr ...

  8. Debian5.04安装oracle11g 笔记

    新安装了Debian5,成功安装了oracle11g.记录过程如下. 1.升级一下系统    #apt-get update    #apt-get upgrade 2.安装需要的一些组件:    # ...

  9. Android中this.*与*.this还有*.class的区别是什么？

    这些是java的基础知识.首先this代表本类的一个引用,this.*表示调用本类的某个方法,这个时候通常可以省略this:但在内部类中不能省略,否则编译器会认为是内部类的引用,所以要在this前加上 ...

  10. javaweb学习总结四(反射技术)

    一:反射的概念 反射就是加载类,然后获取类的属性.方法.构造函数等. 二:加载类到内存(有硬盘字节码文件到内存) 三种加载类的方式: @Test // 测试加载类 public void test1( ...