<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                ### 表格應用 - 獲取 - `tBodies / tHead / tFoot / rows / cells ` ```js var oTab = document.getElementById('tab1'); alert(oTab.tBodies[0].rows[1].cells[1].innerHTML); ``` - 隔行變色 - 鼠標移入高亮 - 添加/刪除一行 - DOM 方法的使用 - 搜索 - 版本1:基礎版本 -- 字符串比較 - 版本2:忽略大小寫 -- 大小寫轉換 `toLowerCase()/toUpperCase()`,返回字符串 - 版本3:模糊搜索 -- `search()` 的使用,沒找到返回 -1,找到則返回位置 - 版本4:多關鍵詞 -- `split()` 分割字符串,返回數組 - 高亮顯示、篩選 - 排序 - 移動 `li` ,使用`appendChild()`: 刪除原有 `li`,尾部新增 `li` - 元素排序:元素集合轉換成數組 -- `sort()` 排序 -- `appendChild()`插入 - 代碼: ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>表格操作</title> <style> body { margin: 0 auto; width: 400px; } table { border: rgb(97, 97, 97) 1px solid; width: 400px; } td { border: rgb(255, 106, 136) 1px solid; } </style> <script> window.onload = function () { // 封裝getElementById function get(id) { return document.getElementById(id); }; // 表格數據 // tHead 作為最后一個數組傳入 var data = new Array( [1, '張三', 12, "<a href='javascript:;'>刪除</a>"], [2, '李四', 13, "<a href='javascript:;'>刪除</a>"], [3, '王五', 14, "<a href='javascript:;'>刪除</a>"], [4, '王七', 19, "<a href='javascript:;'>刪除</a>"], [5, '王九', 24, "<a href='javascript:;'>刪除</a>"], [6, '李六', 42, "<a href='javascript:;'>刪除</a>"], [7, '李三', 23, "<a href='javascript:;'>刪除</a>"], [8, '李六', 76, "<a href='javascript:;'>刪除</a>"], [9, 'CAT', 8, "<a href='javascript:;'>刪除</a>"], [10, 'cat', 2, "<a href='javascript:;'>刪除</a>"], [11, 'dog', 1, "<a href='javascript:;'>刪除</a>"], [12, '3', 5, "<a href='javascript:;'>刪除</a>"], [13, '31', 2, "<a href='javascript:;'>刪除</a>"], [14, '4', 7, "<a href='javascript:;'>刪除</a>"], [15, '42', 9, "<a href='javascript:;'>刪除</a>"], [16, '啊Q', 9, "<a href='javascript:;'>刪除</a>"], ['ID', '姓名', '年齡', "操作"] ); // 傳入格式化數組文件 data ,自動生成表格 function createTable(data) { // 使用文檔碎片 生成表格 // var frag = document.createDocumentFragment(); var table = document.createElement('table'); var caption = document.createElement('caption'); var thead = document.createElement('thead'); var tbody = document.createElement('tbody'); var tr = document.createElement('tr'); // 渲染表格 get('b1').appendChild(table); table.appendChild(caption); table.appendChild(thead); table.appendChild(tbody); thead.appendChild(tr); var oTr = document.getElementsByTagName('tr'); // 渲染單元格 caption.innerHTML = "<strong style='font-size: 20px'>人員表</strong>"; var i = 0; var j = 0; var rNmb = data.length - 1; // 行 var rLth = data[0].length; //列 // 生成表頭 for (i = 0; i < rLth; i++){ var th = document.createElement('th'); oTr[0].appendChild(th); // 寫入th數據 var aArr = data[rNmb]; table.tHead.rows[0].cells[i].innerHTML = aArr[i]; } // 生成 tbody 及插入內容 for (i = 0; i < rNmb; i++) { var tr = document.createElement('tr'); tbody.appendChild(tr); for (j = 0; j < rLth; j++) { var td = document.createElement('td'); tr.appendChild(td); // 寫入td數據 aArr = data[i]; table.tBodies[0].rows[i].cells[j].innerHTML = aArr[j]; } } // 不加 tBodies[0] 會把 tHead 當作一行 // console.log(table.rows.length); chgColor(); aClick(); } createTable(data); function chgColor() { // 隔行變色 var oTr = document.getElementsByTagName('tr'); var oldColor = ''; for (i = 1; i < oTr.length; i++) { if (i % 2 === 0) { oTr[i].style.background = '#eee'; } else { oTr[i].style.background = '#bbb'; } // 鼠標移入高亮 oTr[i].onmouseover = function () { oldColor = this.style.background; this.style.background = 'yellow'; } oTr[i].onmouseout = function () { this.style.background = oldColor; } } } // 增加/刪除一行 var btn1 = get('btn1'); var btn2 = get('btn2'); var btn3 = get('btn3'); var btn4 = get('btn4'); var btn5 = get('btn5'); var btn6 = get('btn6'); var txt1 = get('txt1'); var txt2 = get('txt2'); var txt3 = get('txt3'); var txt4 = get('txt4'); var id = data.length; var oTab = document.getElementsByTagName('table'); // txt1 txt2 增加一行 btn1.onclick = function () { if (txt1.value != '' && txt2.value != '') { var newPerson = new Array(id, txt1.value, txt2.value, "<a href='javascript:;'>刪除</a>") data.splice(data.length - 1, 0, newPerson); get('b1').removeChild(oTab[0]); createTable(data); id++; } else { alert('請輸入姓名和年齡!'); } } // 根據 txt4 刪除一行 btn3.onclick = del; function del() { for (var i in data) { var aData = data[i]; // console.log(aData[0]) // 校驗輸入ID 是否和 data.ID 匹配 if (aData[0] === parseInt(txt4.value) || aData[0] === parseInt(txtTd)) { data.splice(i, 1); break; } } get('b1').removeChild(oTab[0]); createTable(data); } // 注冊 a 標簽刪除操作事件 var txtTd = ''; function aClick() { var oA = document.getElementsByTagName('a'); for (var i in oA) { oA[i].onclick = function () { // oTab[0].tBodies[0].removeChild(this.parentNode.parentNode); txtTd = this.parentNode.parentNode.cells[0].innerHTML; del(); } } } // data 篩選查詢 btn2.onclick = searchTr; function searchTr() { var oTr = document.getElementsByTagName('tr'); var bData = new Array(); // 儲存表頭 var thData = data[data.length-1]; if (txt3.value != '') { for (var i in data) { var aData = data[i]; // console.log(aData[0]) // 校驗輸入name 是否和 data.name 匹配 if (aData[1].toLowerCase() === txt3.value.toLowerCase()) { // 忽略大小寫 bData.push(data[i]); } else if (aData[1].toLowerCase().search(txt3.value.toLowerCase()) != -1) { // 模糊搜索 search() bData.push(data[i]); } else { // 多關鍵詞搜索 split() 分割關鍵詞 var aTxt = txt3.value.split(' '); for(var j in aTxt) { if (aData[1].toLowerCase().search(aTxt[j].toLowerCase()) != -1) { bData.push(data[i]); continue; } } } } // 傳入表頭 thData bData.push(thData); get('b1').removeChild(oTab[0]); createTable(bData); } else { back(); } } // 恢復 data btn4.onclick = back; function back() { get('b1').removeChild(oTab[0]); createTable(data); } // tr 高亮查詢 btn5.onclick = function () { chgColor(); var name = ''; for (i = 0; i < oTab[0].tBodies[0].rows.length; i++) { name = oTab[0].tBodies[0].rows[i].cells[1].innerHTML; if (txt3.value != '') { if (name.toLowerCase() === txt3.value.toLowerCase()) { // 忽略大小寫 oTab[0].tBodies[0].rows[i].style.background = 'yellow'; } else if (name.toLowerCase().search(txt3.value.toLowerCase()) != -1) { // 模糊搜索 search() oTab[0].tBodies[0].rows[i].style.background = 'yellow'; } else { // 多關鍵詞搜索 split() 分割關鍵詞 var aTxt = txt3.value.split(' '); for(var j in aTxt) { if (name.toLowerCase().search(aTxt[j].toLowerCase()) != -1) { oTab[0].tBodies[0].rows[i].style.background = 'yellow'; continue; } } } } else { back(); } } } // data 根據元素排序 sort() 方法 btn6.onclick = sortName; var item = 0; // 排序的元素 var txt5 = get('txt5'); var thData = data[data.length-1]; // 保存 th function sortName() { item = parseInt(txt5.value); data.pop(); // 去掉最后的 th data.sort(compare); // 正向排序 data.push(thData); // th 加回去 back(); //生成表格 } // 比較函數 此函數 數字類型和字符串類型不能混排 function compare(arr1, arr2) { var val1 = arr1[item]; var val2 = arr2[item]; if (!isNaN(val1) && !isNaN(val2)) { return val1 - val2; } else { if (val1 > val2) { return 1; } else if (val1 < val2) { return -1; } else if (val1 === val2) { return 0; } } } } </script> </head> <body id="b1"> <div> <input type="text" name="name" id="txt1" placeholder="姓名"> <input type="text" name="age" id="txt2" placeholder="年齡"> <input type="button" name="" id="btn1" value="增加"> </div> <div> <input type="text" name="" id="txt3" value="張三 六 五"> <input type="button" name="" id="btn2" value="篩選查詢"> <input type="button" name="" id="btn4" value="返回"> <input type="button" name="" id="btn5" value="高亮查詢"> </div> <div> <input type="text" name="" id="txt4" placeholder="id"> <input type="button" name="" id="btn3" value="刪除"> </div> <div> <input type="text" name="" id="txt5" value='1'> <input type="button" name="" id="btn6" value="排序"> </div> </body> </html> ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看