html的scoped属性---表格在获取焦点时，可编辑

最新推荐文章于 2024-07-04 10:43:31 发布

年轻即出发

最新推荐文章于 2024-07-04 10:43:31 发布

阅读量609

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_42246997/article/details/90759038

版权

HTML 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

定义和用法

scope 属性定义将表头单元与数据单元相关联的方法。

scope 属性标识某个单元是否是列、行、列组或行组的表头。

scope 属性不会在普通浏览器中产生任何视觉变化。

屏幕阅读器可以利用该属性。

详细解释

使用 scope 属性，可以将数据单元格与表头单元格联系起来。

通过属性值 row，表头行包括的所有表格都将和表头单元格联系起来。指定 col，会将当前列的所有单元格和表头单元格绑定起来。

使用 rowgroup 和 colgroup 会将单元格的行组（由 <thead>、<tbody> 或 <tfoot> 标签定义）或列组中的所有单元格和表头单元格绑定起来（由 <col> 或 <colgroup> 标签定义）。

浏览器支持

由于不会在普通浏览器中产生任何视觉效果，很难判断浏览器是否支持 scope 属性。

语法

<td scope="value">

属性值

值	描述
col	规定单元格是列的表头。
row	规定单元格是行的表头。
colgroup	规定单元格是列组的表头。
rowgroup	规定单元格是行组的表头。

实例

下面的例子把两个 th 元素标识为列的表头，把两个 td 元素标识为行的表头：

<table border="1">
  <tr>
    <th scope="col">Month</th>
    <th scope="col">Savings</th>
  </tr>
  <tr>
    <td scope="row">1</td>
    <td>January</td>
    <td>$100.00</td>
  </tr>
  <tr>
    <td scope="row">2</td>
    <td>February</td>
    <td>$10.00</td>
  </tr>
</table>

今天用到的知识点：在获取焦点时变成可编辑的input输入框：

<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery表格可编辑修改表格里面的数值</title>
<meta name="description" content="jquery表格特效制作jquery表格可编辑任意修改里面的数值" />
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
  $('table td').click(function(){
    if(!$(this).is('.input')){
      $(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){
        $(this).parent().removeClass('input').html($(this).val() || 0);
      });
    }
  }).hover(function(){
    $(this).addClass('hover');
  },function(){
    $(this).removeClass('hover');
  });
});
</script>
<style type="text/css">
/* page styles */
body{font-family:"Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif;font-size:62.5%;}
td, th{text-align:center;border:1px solid #ddd;padding:2px 5px;font-size:1.2em;widows: 13%;}
/*demo styles*/
table{width:500px;height:200px;margin-left:30px;border-collapse:collapse;}
/* td, th{font-size:1.2em;padding:2px;width:10%;} */
th{background-color:#f4f4f4;}
caption{font-size:1.5em; font-weight:bold;margin:0 0 .5em;}
table{float:left;margin:40px 40px 0 0;}
.demo{width:500px;margin:0 auto;}
/* input */
td input{border:1px solid orange;background:yellow;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;padding:8px 0;text-align:center;width:60px;font-size:inherit;}
/* td.input{ padding:0;} */
td.hover{background:#eee;}
</style>
</head>
<body>
<div class="demo">
  <table>
    <caption>2009年员工产品销售走势图</caption>
    <thead>
      <tr>
        <th scope="col"></th>
        <th scope="col">food</th>
        <th scope="col">auto</th>
        <th scope="col">household</th>
        <th scope="col">furniture</th>
        <th scope="col">kitchen</th>
        <th scope="col">bath</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Mary</th>
        <td>190</td>
        <td>160</td>
        <td>40</td>
        <td>120</td>
        <td>30</td>
        <td>70</td>
      </tr>
      <tr>
        <th scope="row">Tom</th>
        <td>3</td>
        <td>40</td>
        <td>30</td>
        <td>45</td>
        <td>35</td>
        <td>49</td>
      </tr>
      <tr>
        <th scope="row">Brad</th>
        <td>10</td>
        <td>180</td>
        <td>10</td>
        <td>85</td>
        <td>25</td>
        <td>79</td>
      </tr>
      <tr>
        <th scope="row">Kate</th>
        <td>40</td>
        <td>80</td>
        <td>90</td>
        <td>25</td>
        <td>15</td>
        <td>119</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

scope是一个非常重要的属性。本文中的例子，亲测过，可以实现编辑。