日常语无伦次,今天来总结table

我又来胡诌了。
表格是我们必不可少的东西。
OK,我们先写几个input标签。

<body>
age:<input type="text" name="" id="age">
name:<input type="text" name="" id="name">
<input type="submit" value="check" id="check">
<input type="text" id="tex" value="" placeholder="search">
<button id="sea" type="">searchbutton>
<table id="tab" style="border-collapse:collapse;table-layout:fixed;" border="1px solid #222" cellspacing="0">
    <thead >
      <tr>
        <th>idth>
        <th>ageth>
        <th>nameth>
        <th>delth>
      tr>
    thead>
    <tbody>
      <tr>
        <td width="20px">1td>
        <td>10td>
        <td>jokertd>
        <td><a href="javescript:;">dela>td>
      tr>
      <tr>
        <td>2td>
        <td>memonytd>
        <td>13td>
        <td><a href="javescript:;">dela>td>
      tr>
      <tr>
        <td>3td>
        <td>dollortd>
        <td>18td>
        <td><a href="javescript:;">dela>td>
      tr>
      <tr>
        <td>4td>
        <td>bbotd>
        <td>16td>
        <td><a href="javescript:;">dela>td>
      tr>
      <tr>
        <td>5td>
        <td>Abctd>
        <td>9td>
        <td><a href="javescript:;">dela>td>
      tr>
    tbody>
  table>
body>

布局搞定,下面继续的码代码。
先来一波定义

window.οnlοad=function(){
 var oTr = document.getElementsByTagName('tr')
 var oTab = document.getElementById('tab')
 var row = oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0]
//隔行变色
 var oTrs =oTab.tBodies[0].rows;
 var oCol = null;
 for(var i = 0;iif(i%2==0){
 oTrs[i].style.background = '#bbb';
 }
 oTrs[i].mouseover=function(){
 oCol = this.style.backgroundColor;
 this.style.backgroundColor = '#fff';
 }
 oTrs[i].mouseout = function(){
 this.style.backgroundColor = oCol;
 }
 }
}

ok,上面是隔行变色。下面写增减行数。

    var oAge = document.getElementById('age')
    var oName = document.getElementById('name')
    var Che = document.getElementById('check')
    var di = oTab.tBodies[0].rows.length
    Che.οnclick=function(){
        var or = document.createElement('tr')
        var od = document.createElement('td')
        or.appendChild(od)

        var od = document.createElement('td')
       od.innerHTML = oAge.value;
       or.appendChild(od)

       var od = document.createElement('td')
       od.innerHTML = oName.value;
       or.appendChild(od)

       var od = document.createElement('td')
       od.innerHTML = 'del'
       or.appendChild(od)

       oTab.tBodies[0].appendChild(or);

       var arr = oTab.tBodies[0].getElementsByTagName('a')
       var oa = document.getElementsByTagName('a')
       for(var j = 0;jfunction(){
    oTab.tBodies[0].removeChild(this.parentNode.parentNode)
}
}
}

你可能感兴趣的:(前端-table)