dom中表格的修改 增加行例

增加一行 

/*
  添加一行
  1、找到父元素（往这里面添加元素）
  2、创建元素 tr td
  创建td元素 创建tr元素
  把td元素放到tr元素里面
  3、把tr放到父元素
  */
  function addcol(){
  // 1、找到父元素（往这里面添加元素）
  var tableObj = document.getElementById("tab");
   
  // 2、创建元素 tr td创建td元素 创建tr元素
  var trObj = document.createElement("tr");
   
   
  for(var i = 0; i<4;i++){
  var tdObj = document.createElement("td");
  tdObj.innerHTML = "李四";
  // 把td元素放到tr元素里面
  trObj.appendChild(tdObj);
  }
   
  // 3、把tr放到父元素
  tableObj.appendChild(trObj);
   
  var div = document.getElementById("dd");
   
   
   
  } 

点击修改输入的内容，并添加加粗，变红按钮。

//window.onload = modTwo;
  /*
  1、点击单元格内容 弹窗promrt接收值 将接受的值提换单元格内容
  2、点击单元格 出现2个按钮 加粗 字体颜色标红
  1、给点击的元素加属性 为了区分加粗的对象
  2、给按钮加点击事件
  3、找到元素，修改样式
  3、创建一行
  */
   
  /*
  1、获取所有的td标签
  2、循环td 给每一个替代加上onclick属性
  */
  //给所有元素加onclick事件
  function modTwo(){
   
  var tdArr = document.getElementsByTagName("td");
   
  for(var i = 0; i<tdArr.length;i++){
  tdArr[i].setAttribute("onclick","modone(this)");
  tdArr[i].style.cursor = "pointer";
  }
  }
   
   
   
  /*
  1、给单元格添加点击事件
  2、方法内逻辑，弹窗接收用户的输入。=>保存在一个变量里面
  3、找到要修改内容的单元格，通过操作内容把用户输入的值提换进去
  */
  var td_obj;
  //td的点击事件
  function modone(obj){
  td_obj = obj;
  //修改值
  obj.innerHTML = prompt("输入要修改的值");
  //按钮显示
  var div = document.getElementById("dd");
  div.style.display = "block";
   
  //给本标签添加自定义属性
  obj.setAttribute("abc","abc");
  }
   
   
  //加粗按钮
  function jc(){
  //找到所有td
  var tdArr = document.getElementsByTagName("td");
   
  for(var i = 0; i<tdArr.length;i++){
  //找元素
  var a = tdArr[i].getAttribute("abc");
  if(a == "abc"){
  tdArr[i].style.fontWeight = "bold";
  tdArr[i].removeAttribute("abc");
  }
  }
  }
  //字体变红按钮
  function bh(){
  //td_obj是全局变量
  td_obj.style.color = "red";
  //按钮显示
  var div = document.getElementById("dd");
  div.style.display = "none";
  } 
<body ><!-- onLoad="modTwo()" -->
  <button onClick="addcol()">添加一行</button>
  <table id="tab" border="1" width="80%" cellpadding="0" cellspacing="0">
  <tr>
  <th>姓名</th>
  <th>性别</th>
  <th>年龄</th>
  <th>班级</th>
  </tr>
  <tr>
  <td>张三</td>
  <td>男</td>
  <td>15</td>
  <td>101</td>
  </tr>
   
   
  </table>
   
  <div id="dd" style="">
  <button onClick="jc()">加粗</button>
  <button onClick="bh()">红色字体</button>
  </div>
   
  </body>
posted @ 2017-10-17 10:49  落落无伤  阅读(719)  评论(0)    收藏  举报