html设置table为不可编辑状态,一样的table？不一样的table(可编辑状态table)

新的一天开始了，生活还要继续，今天要和大家分享的是不一样的table，普通的table就用于显示数据，今天要分享的table不仅仅能显示数据，还可以对数据进行编辑，当鼠标点击数据时相应的数据格就变成可编辑的状态，废话不多说，进入今天的主题，首先完成HTML页面：

JQueryProject1

鼠标点击下列内容可以进行编辑

学号姓名000001张三000002李四000003王五000004赵六

没错现在它还是一个普通的table，一点样式都还没有，为了让这个table显得不那么抽象，接下来为它引入CSS样式

table{

width:400px;

height: 150px;

}

table, table td, table th{

border:1px solid black;

border-collapse: collapse;

}

table td{

width:50%;

height: 25px;

}

thead th{

background-color:#87CEFA;

}

tbody th{

background-color:#FFFACD;

}

在HTML页面中可编辑的页面元素就只有那么几个，很不幸table并不是其中一个，为了让table变得可编辑，就要向table中插入可编辑的页面元素，再用CSS装饰一下，让它看起来还是一个普通的table，然而却具备了可编辑的功能