练习 | JS编写简单逻辑

题目

  1. 点击单元格11,使表格的背景颜色变成红色;
  2. 点击单元格12,将单元格的内容变成当前的日期,其格式为(yyyy-mm-dd);
  3. 点击单元格21,将在现有单元格后面插入一行;
  4. 点击单元格22,将删除表格的第2行;
  5. 点击单元格31,显示当前的鼠标坐标;
  6. 点击单元格32,打开一个新窗口,里面显示百度主页;
<html>
    <head>  
        <script src="js/table.js">script>
        <link href="css/table.css" rel="stylesheet">
    head>
    <body>
        <table id="tbl">
            <tr>
                <td>11td>
                <td>12td>
            tr>
            <tr>
                <td>21td>
                <td>22td>
            tr>
            <tr>
                <td>31td>
                <td>32td>
            tr>
        table>
    body>
html>

没有使用 jQuery, 使用了 Moment.js

文件结构

ex01
├─ css
│    └─ table.css
├─ js
│    └─ table.js
├─ lib
│    └─ moment.min.js
└─ table.html

table.html

<html>
  <head>  
    <link href="css/table.css" rel="stylesheet">
  head>
  <body>
    <table id="tbl" class="" border="1">
      <tr>
        <td onclick="changeBackColor()">11td>
        <td id="t-12" onclick="changeText()">12td>
      tr>
      <tr>
        <td onclick="addRow()">21td>
        <td onclick="delRow(this)">22td>
      tr>
      <tr>
        <td onclick="showLoation()">31td>
        <td onclick="newPage()">32td>
      tr>
    table>
    <script src="js/table.js">script> 
    <script src="lib/moment.min.js">script>
  body>
html>

table.css

.tbl {
     
  background-color: red;
}

table.js

// 点击单元格11,使表格的背景颜色变成红色;
function changeBackColor() {
     
  let obj = document.getElementById('tbl');
  let currentClass = obj.className;
  if(currentClass === 'tbl') {
     
  	obj.className = '';
  }else {
     
  	obj.className = 'tbl';
  }
}

// 点击单元格12,将单元格的内容变成当前的日期,其格式为(yyyy-mm-dd);
function changeText() {
     
  let obj = document.getElementById('t-12');
  obj.innerHTML = moment().format('YYYY-MM-DD');
}

//点击单元格21,将在现有单元格后面插入一行;
function addRow() {
     
  let obj = document.getElementById('tbl');
  obj.innerHTML = obj.innerHTML + 'newnew';
}

//点击单元格22,将删除表格的第2行;
function delRow(obj) {
     
  obj.parentNode.remove();
}

//点击单元格31,显示当前的鼠标坐标;
function showLoation() {
     
  let x = event.clientX;
  let y = event.clientY;
  console.log(x, y);
}

//点击单元格32,打开一个新窗口,里面显示主页;
function newPage() {
     
  window.open('https:www.baidu.com');
}

你可能感兴趣的:(学习记录,Web)