html css js 1

Thanks Tutorial！

html css 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test for html</title>
  <style>
    *{
      font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .df {
      color: blue
    }

    /* 这可以嵌套！！ */
    .t1 > .t2 h2{
      color:yellow
    }
    .f1::first-letter{
      color:aqua
    }
    table{
      width: 100%;
      border-collapse: collapse;
      background-color: rgb(238, 255, 205);
    }
    table tr td{
      text-align: center;
      border: 1px solid yellow;
    }
    table tr th{
      text-align: center;
      border: 2px solid purple;
    }
    .op{
      width: 10%;
    }
  </style>
  <script>
    console.log("dingfei");
    // alert("你是个丁飞");
    let a=1;
    let b=0x3f3f3f3f;
    const inf = 0x3f3f3f3f;
    let longint = 1e17;
    let bigint = 1e100;
    console.log('\n');
    console.log(a,"abcdfdfdfdfdf",b,inf);
    console.log(longint);
    console.log(bigint);

    
  </script>
  <script src="../jsfortable.js"></script>
  <!-- <script src="./js1.js"></script> -->
</head>
<body>
  <div>
    <p class="df">我是丁飞</p>
  </div>
  <div class="t1">
    <h2>我是丁飞</h2>
    <div class="t2">
      <h2>我是dxj</h2>
      <div class="t3">
        <h2>我不是小苹果的后代</h2>
      </div>
    </div>
  </div>
  <div class="f1">
    <p>我是小苹果</p>
  </div>
  <div class="f2">
    <p>我是大香蕉</p>
  </div>
  <table id="t4">
    <h1>DXJ</h1>
    <tr>
      <th>name</th>
      <th>number</th>
      <th>df</th>
      <th>operations</th>
    </tr>
    <tr>
      <td>丁飞</td>
      <td>733</td>
      <td>df</td>
      <td class="op">
        <button onclick="modi(this)">add</button>
        <button onclick="del_row(this)">del</button>
      </td>
    </tr>
    <tr>
      <td>DXJ</td>
      <td>577</td>
      <td>df</td>
      <td class="op">
        <button onclick="modi(this)">add</button>
        <button onclick="del_row(this)">del</button>
      </td>
    </tr>
  </table>
  <button onclick="add_row()">new row</button>

</body>
</html>
js DOM 
function add_row(){
  let tb=document.getElementById('t4');
  let length=tb.rows.length;
  let newr=tb.insertRow(length);
  let c1=newr.insertCell(0);
  let c2=newr.insertCell(1);
  let c3=newr.insertCell(2);
  let c4=newr.insertCell(3);
  c1.innerHTML="u1";
  c2.innerHTML="73357733";
  c3.innerText="df";
  c4.innerHTML='<button onclick="modi(this)">add</button><button onclick="del_row(this)">del</button>';
  c4.className='op';
  return;
}
function del_row(delid){
  let pp=delid.parentNode.parentNode;
  let hdler=pp.parentNode;
  hdler.removeChild(pp);
  return;
}
function modi(modiid){
  let root=modiid.parentNode.parentNode;
  let name=root.cells[0];
  let number=root.cells[1];
  let df=root.cells[2];
  let n=prompt("entername");
  name.innerHTML=n;
 
}
posted @ 2026-02-12 17:49  hm2ns  阅读(17)  评论(0)    收藏  举报