動態添加表格

時間  2019-11-20
標籤 動態 添加 表格 简体版
原文   原文鏈接

一、表格包含的HTML DOM對象javascript

二、Table對象css

三、TableRow對象html

四、TableCell對象java

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>動態添加表格</title>
    <style type="text/css">
  .title{ text-align:center;
    font-weight:bold;
    background:#F00;
    color:#FFF;}
     .center{ text-align:center;}
  #displayInfo{color:red;}
    </style>
    <script type="text/javascript">
     function addRow () {
   var tableObj = document.getElementById("myTable");
   var rowNums = tableObj.rows.length;
   var newRow = tableObj.insertRow(rowNums);
   var col1 = newRow.insertCell(0);
   col1.innerHTML = "幸福從天而將";
   var col2 = newRow.insertCell(1);
   col2.innerHTML = "20.00";
   col2.className = "center";
   
   var divInfo = document.getElementById("displayInfo");
   divInfo.innerHTML = "添加商品成功。";
  }
  
  function delRow () {
   var tableObj = document.getElementById("myTable");
   tableObj.deleteRow(2);
   
   var divInfo = document.getElementById("displayInfo");
   divInfo.innerHTML = "刪除成功。"; 
  }
  
  function updateRow () {
   var tableObj = document.getElementById("myTable");
   var firstRow = tableObj.rows[0];
   firstRow.className = "title"; 
  }
    </script>
</head>
<body>
 <table border="1" cellpadding="0" cellspacing="0" id="myTable" height="200" width="380">
     <tr id="row1">
         <td>書名</td>
            <td class="center">價格</td>
        </tr>
        <tr id="row2">
         <td>平凡的世界</td>
            <td class="center">16.80</td>
        </tr>
        <tr id="row3">
         <td>看的見風景的房間</td>
            <td class="center">30.00</td>
        </tr>
    </table>
    <input id="b1" type="button" value="增長一行" onclick="addRow();"/>
    <input id="b2" type="button" value="刪除第2行" onclick="delRow();"/>
    <input id="b3" type="button" value="修改標題" onclick="updateRow();"/>
    <div id="displayInfo"></div>
</body>
</html>

執行結果：web

三、進銷存管理數組

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>進銷存管理系統</title>
    <style type="text/css">
     #myTable tr.title td{ background:#0CF;
         text-align:center;
         font-weight:bold;}
  .inputNoBorder{ border-style:none;}
    </style> 
    <script type="text/javascript">
     function editRow (cellObj) {
   var trObj = cellObj.parentNode.parentNode;
   for (var i = 0 ; i < 3 ; i++) {
    trObj.cells[i].firstChild.readOnly = false;
    trObj.cells[i].firstChild.className = "inputNoBorder";
   }
   
   cellObj.value = "保存";
   cellObj.setAttribute("onclick","saveRow(this);");
  }
  
  function saveRow (cellObj) {
   var trObj = cellObj.parentNode.parentNode;
   for (var i = 0 ; i < 3 ; i++) {
    trObj.cells[i].firstChild.readOnly = true;
    trObj.cells[i].firstChild.className = "inputNoBorder";
   }
   
   cellObj.value = "修改";
   cellObj.setAttribute("onclick","editRow(this);");
  }
  
  function delRow (cellObj) {
   var tableObj = document.getElementById("myTable");
   var trObj = cellObj.parentNode.parentNode;
   tableObj.deleteRow(trObj.rowIndex);
  }
  
  function addProduct () {
   var tableObj = document.getElementById("myTable");
   var rowNums = tableObj.rows.length;
   
   var textInput1 = document.createElement("input");
   textInput1.type = "text";
   textInput1.className = "inputNoBorder";
   var textInput2 = document.createElement("input");
   textInput2.type = "text";
   textInput2.className = "inputNoBorder";
   var textInput3 = document.createElement("input");
   textInput3.type = "text";
   textInput3.className = "inputNoBorder";
   var delInput = document.createElement("input");
   delInput.type = "button";
   delInput.value = "刪除";
   delInput.setAttribute("onclick","delRow(this);");
   var saveInput = document.createElement("input");
   saveInput.type = "button";
   saveInput.value = "保存";
   saveInput.setAttribute("onclick","saveRow(this);");
   saveInput.setAttribute("style","margin-left:10px;");
   
   var newRow = tableObj.insertRow(rowNums-1);
   var col1 = newRow.insertCell(0);
   col1.appendChild(textInput1);
   var col2 = newRow.insertCell(1);
   col2.appendChild(textInput2);
   var col3 = newRow.insertCell(2);
   col3.appendChild(textInput3);
   var col4 = newRow.insertCell(3);
   col4.appendChild(delInput);
   col4.appendChild(saveInput);
  }
    </script>
</head>
<body>
 <p style="padding-left:150px; font-weight:bold;">進銷存管理系統-後臺進貨管理</p>
    <table border="1" cellpadding="0" cellspacing="0" id="myTable">
     <tr class="title">
         <td>商品名稱</td>
            <td>數量</td>
            <td>進價</td>
            <td>操做</td>
        </tr>
        <tr>
         <td><input name="row1" type="text" value="雅芳1" readonly="readonly"/></td>
            <td><input name="row1" type="text" value="100" readonly="readonly"/></td>
            <td><input name="row1" type="text" value="6.00" readonly="readonly"/></td>
            <td>
             <input  type="button" value="刪除" onclick="delRow(this);"/>
             <input  type="button" value="修改" onclick="editRow(this);"/>
            </td>
        </tr>
        <tr>
         <td><input name="row1" type="text" value="雅芳2" readonly="readonly"/></td>
            <td><input name="row1" type="text" value="200" readonly="readonly"/></td>
            <td><input name="row1" type="text" value="7.00" readonly="readonly"/></td>
            <td>
             <input  type="button" value="刪除" onclick="delRow(this);"/>
             <input  type="button" value="修改" onclick="editRow(this);"/>
            </td>
        </tr>
        <tr>
         <td><input name="row1" type="text" value="雅芳3" readonly="readonly"/></td>
            <td><input name="row1" type="text" value="300" readonly="readonly"/></td>
            <td><input name="row1" type="text" value="8.00" readonly="readonly"/></td>
            <td>
             <input  type="button" value="刪除" onclick="delRow(this);"/>
             <input  type="button" value="修改" onclick="editRow(this);"/>
            </td>
        </tr>
        <tr style="text-align:center;">
         <td colspan="4" style="height:30px;">
             <input type="button" value="增長商品" onclick="addProduct();"/>
            </td>
            
        </tr>
    </table>
</body>
</html>

執行結果：app

 

四、省市級聯特效概述ide

    1）建立數組post

    2）數組的賦值和讀取ui

    3）數組的經常使用屬性和方法

數組方法應用事例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>數組方法的應用</title>
    <script type="text/javascript">
     var fruitArray = new Array("apple" , "orange" , "peach" , "banana");
  document.write(fruitArray.join(",") + "<br/>");
  
  document.write("排序前的數組：<br/>");
  
  for (var i in fruitArray) {
   document.write(fruitArray[i] + "<br/>");
  }
  
  fruitArray.sort();
  
  document.write("排序後的數組：<br/>");
  
  for (var i in fruitArray) {
   document.write(fruitArray[i] + "<br/>");
  }
  
  document.write("字符串分割成數組：<br/>");
  var strFruit = fruitArray.join(";");
  var tempArray = strFruit.split(";");
  for (var i in tempArray) {
   document.write(tempArray[i] + "<br/>");
  }
  
    </script>
</head>
<body>
</body>
</html>

執行結果：

apple,orange,peach,banana
排序前的數組：
apple
orange
peach
banana
排序後的數組：
apple
banana
orange
peach
字符串分割成數組：
apple
banana
orange
peach

五、下拉列表框select對象

事例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>簡單的添加下拉菜單</title>
    <script type="text/javascript">
     function addCity () {
   var selProvince = document.getElementById("province");
   var province = selProvince.options[selProvince.selectedIndex].value;
   // var province =  selProvince.value
   
   var selCity = document.getElementById("city");
   // 清空下拉列表
   selCity.options.length = 0;
   switch (province) {
    case "河南省":
     selCity.add(new Option("鄭州市","鄭州市"),null);
     selCity.add(new Option("洛陽市","洛陽市"),null);
     break;
    case "河北省":
     selCity.add(new Option("邯鄲市","邯鄲市"),null);
     selCity.add(new Option("石家莊市","石家莊市"),null);
     
    var option = document.createElement("option");
     option.value = "保定市";
     option.appendChild(document.createTextNode("保定市"));
     selCity.appendChild(option);
     break;
    case "山東省":
     selCity.add(new Option("青島市","青島市"),null);
     selCity.add(new Option("煙臺市","煙臺市"),null);
     break;
   }
  }
    </script>
</head>
<body>
 <form action="" method="post" name="myForm" id="myForm">
     <select id="province" onchange="addCity();">
         <option>--選擇省份--</option>
            <option value="河南省">河南省</option>
            <option value="河北省">河北省</option>
            <option value="山東省">山東省</option>
        </select>
        <select id="city">
         <option>--選擇城市--</option>
        </select>
    </form>
</body>
</html>

六、使用二位數組改進省市級聯特效

 升級後樣例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>使用二維數組改進城市級聯</title>
    <script type="text/javascript">
     var provinces = new Array (
      new Array("00","--選擇省份--"),
      new Array("01","北京市"),
      new Array("02","湖北省"),
      new Array("03","四川省"),
      new Array("04","江蘇省"),
      new Array("05","湖南省"));
  var cities = new Array (
      new Array("0101","北京市"),
      new Array("0201","武漢市"),
      new Array("0202","荊州市"),
      new Array("0301","成都市"),
      new Array("0302","綿陽市"),
      new Array("0401","南京市"),
      new Array("0402","蘇州市"),
      new Array("0501","長沙市"),
      new Array("0502","株洲市"));
  
  function fillProvince () {
   var selProvince = document.getElementById("province");
   
   for (var i = 0 ; i < provinces.length ; i++) {
    var option = new Option(provinces[i][1],provinces[i][0]);
    selProvince.add(option , null); 
   }
   
   selProvince.options[0].selected = true;
  }
  
  function addCity () {
   var selProvince = document.getElementById("province");
   var provinceCode = selProvince.options[selProvince.selectedIndex].value;
   
   var selCity = document.getElementById("city");
   selCity.options.length = 0;
   selCity.add(new Option("--選擇城市--","0000"),null);
   
   for (var i = 0 ; i < cities.length ; i++) {
    if (cities[i][0].substring(0,2) == provinceCode) {
     selCity.add(new Option(cities[i][1],cities[i][0]),null); 
    } 
   }
   
   sleCity.options[0].selected = true; 
  }
  
    </script>
</head>
<body onload="fillProvince();">
 <form action="" method="post" name="myForm" id="myForm">
     <select id="province" onchange="addCity();">
         <!--<script type="text/javascript">fillProvince();</script>-->
        </select>
        <select id="city">
        </select>
    </form>
</body>
</html>

執行結果：

七、javascript 與 CSS的交互

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>無標題文檔</title>
    <style type="text/css">
     ul li{ background-color:#FF0;
      text-align:center;
      float:left;
      list-style:none;
      margin-left:3px;
      height:33px;
      width:104px;
      padding-top:10px;}
      
  .over{ background-color:#F00;
      font-weight:bold;
      color:#FFF;
      cursor:pointer;}
  .out{ background-color:#FF0;}
    </style>
</head>
<body>
 <ul>
     <li onmouseover="this.className='over';" onmouseout="this.className='out'">資訊動態</li>
        <li onmouseover="this.className='over';" onmouseout="this.className='out'">產品世界</li>
        <li onmouseover="this.className='over';" onmouseout="this.className='out'">市場營銷</li>
    </ul>
</body>
</html>

執行結果：

顯示和隱藏：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>無標題文檔</title>
    <script type="text/javascript">
   function showImage () {
   document.getElementById("photo").style.visibility = "visible";
   //document.getElementById("photo").style.display = "block"; 
  }
  
  function hideImage () {
   //document.getElementById("photo").style.display = "none";
   document.getElementById("photo").style.visibility = "hidden"; 
  }
    </script>
</head>
<body>
   <div id="photo"><img src="images/錢塘湖春行.jpg"/></div>
    <input type="button" value="顯示圖片" onclick="showImage();"/>
    <input type="button" value="隱藏圖片" onclick="hideImage();"/>
</body>
</html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程