JavaScript 实现表格按列拖动、排序、隔行换色

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript实现表格列拖动、排序、表格隔行换色样式等</title>
<style type="text/css">
@charset "utf-8";

body {
  color: #333;
  text-align: center;
  font: 12px "微软雅黑";
}

ul,
ol,
li {
  list-style-type: none;
  vertical-align: 0
}

a {
  outline-style: none;
  color: #535353;
  text-decoration: none
}

a:hover {
  color: #D40000;
  text-decoration: none
}

.clear {
  height: 0;
  overflow: hidden;
  clear: both
}

.datouwang {
  height: 100px;
  line-height: 100px;
  font-size: 30px;
  font-family: '微软雅黑';
  text-align: center;
  font-weight: normal
}

#chenkbox {
  margin: 0px auto;
  width: 800px;
  position: relative;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  background-color: #fff;
}

th {
  background: #ebf3f0;
  font-size: 13px;
  color: #000002;
  height: 25px;
  cursor: pointer;
}

th,
td {
  text-align: center;
  border: 1px solid #dcdbdb;
  padding: 8px 10px;
}

#box {
  position: absolute;
  display: none;
  background: #fff;
  text-align: center;
  top: 0;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  height: 100%;
  cursor: move;
}

#box p {
  line-height: 34px;
}

table.style {
  margin-top:15px;
  border-collapse:collapse;
  border:1px solid #aaa;
  width:100%;
}
table.style th {
vertical-align:baseline;
padding:5px 15px 5px 6px;
background-color:#3F3F3F;
border:1px solid #3F3F3F;
text-align:center;
color:#fff;
}
table.style td {
  vertical-align:text-top;
  padding:6px 15px 6px 6px;
  border:1px solid #aaa;
}
table.style tr:nth-child(odd) {
  background-color:#F5F5F5;
}
table.style tr:nth-child(even) {
  background-color:#fff;
}
table.style input[type="submit"],input[type="reset"]  {
 height:20px;
    width:150px;
    border:1px solid #858fa6;
    background:#4a5775;
    /* CSS3 */
    background:-moz-linear-gradient(top, #606c88, #3f4c6b);
    background:-webkit-gradient(linear, left top, left bottom, from(#606c88), to(#3f4c6b));
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:0px 0px 5px #000;
    -webkit-box-shadow:0px 0px 5px #000;
    box-shadow:0px 0px 5px #000;
    /* Text */
    color:#e5edff;
    text-shadow:0px 0px 5px rgba(0, 0, 0, 0.75);
    font-size:14px;
}


</style>
</head>
<body>

<h1 class="datouwang">JavaScript实现表格列拖动、排序、表格隔行换色样式等</h1>

<div id="chenkbox">
<table id="tableSort" class="style">
<tr>
<th onclick="sortTable('tableSort',0)" title="点击排序"> 序列 </th>
<th onclick="sortTable('tableSort',1)" title="点击排序"> 名称 </th>
<th onclick="sortTable('tableSort',2)" title="点击排序"> 数量 </th>
<th onclick="sortTable('tableSort',3)" title="点击排序"> 单价(Q点) </th>
<th onclick="sortTable('tableSort',4)" title="点击排序"> 总计(Q点) </th>
</tr>
<tr>
<td>1</td>
<td>农场话费A</td>
<td>2</td>
<td>50</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>飞车道具C</td>
<td>1</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td>空间K</td>
<td>1</td>
<td>120</td>
<td>120</td>
</tr>
<tr>
<td>4</td>
<td>农场狗粮C</td>
<td>4</td>
<td>60</td>
<td>240</td>
</tr>
<tr>
<td>5</td>
<td>音速种子</td>
<td>2</td>
<td>110</td>
<td>220</td>
</tr>
<tr>
<td>6</td>
<td>农场化肥D</td>
<td>5</td>
<td>60</td>
<td>300</td>
</tr>
<tr>
<td>7</td>
<td>AVA装扮C</td>
<td>1</td>
<td>300</td>
<td>300</td>
</tr>
<tr>
<td>8</td>
<td>三国道具C</td>
<td>15</td>
<td>60</td>
<td>900</td>
</tr>
<tr>
<td>9</td>
<td>DNF道具B</td>
<td>4</td>
<td>300</td>
<td>1200</td>
</tr>
<tr>
<td>10</td>
<td>农场化肥H</td>
<td>6</td>
<td>80</td>
<td>120</td>
</tr>
<tr>
<td>11</td>
<td>农场化肥B</td>
<td>1</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>12</td>
<td>Q宠元宝</td>
<td>100</td>
<td>1</td>
<td>100</td>
</tr>
<tr>
<td>13</td>
<td>三国道具K</td>
<td>9</td>
<td>20</td>
<td>180</td>
</tr>
</table>
<div id="box"></div>
</div>

<script type="text/javascript">

//排序
function sortTable(table, idx) {
var otable = document.getElementById(table),
otody = otable.tBodies[0],
otr = otody.rows,
tarr = [];
for (var i = 1; i < otr.length; i++) {
tarr[i - 1] = otr[i];
};

if (otody.sortCol == idx) {
tarr.reverse();
} else {
tarr.sort(function (tr1, tr2) {
var value1 = tr1.cells[idx].innerHTML;
var value2 = tr2.cells[idx].innerHTML;
if (!isNaN(value1) && !isNaN(value2)) {
return value1 - value2;
} else {
return value1.localeCompare(value2);
}
})
}
var fragment = document.createDocumentFragment();
for (var i = 0; i < tarr.length; i++) {
fragment.appendChild(tarr[i]);
}
otody.appendChild(fragment);
otody.sortCol = idx;
}

//拖动
function Drag(table) {
var ochek = document.getElementById("chenkbox"),
otable = document.getElementById(table),
otody = otable.tBodies[0],
oth = otody.getElementsByTagName("th"),
otd = otody.getElementsByTagName("td"),
box = document.getElementById("box"),
arrn = [];
for (var i = 0; i < otd.length; i++) {
otd[i].onmousedown = function (e) {
var e = e || window.event,
target = e.target || e.srcElement,
thW = target.offsetWidth,
maxl = ochek.offsetWidth - thW,
rows = otable.rows,
ckL = ochek.offsetLeft,
disX = target.offsetLeft,
_this = this,
cdisX = e.clientX - ckL - disX;
for (var i = 0; i < rows.length; i++) {
var op = document.createElement("p");
op.innerHTML = rows[i].cells[this.cellIndex].innerHTML;
box.appendChild(op);
}
for (var i = 0; i < oth.length; i++) {
arrn.push(oth[i].offsetLeft);
}

box.style.display = "block";
box.style.width = thW + "px";
box.style.left = disX + "px";

//未完成 还有事件没写。
document.onmousemove = function (e) {
var e = e || window.event,
target = e.target || e.srcElement,
thW = target.offsetWidth;
box.style.top = 0;
box.style.left = e.clientX - ckL - cdisX + "px";
if (box.offsetLeft > maxl) {
box.style.left = maxl + "px";
} else if (box.offsetLeft < 0) {
box.style.left = 0;
}
document.onselectstart = function () {
return false
};
window.getSelection ? window.getSelection().removeAllRanges() : doc.selection.empty();
};
document.onmouseup = function (e) {
var e = e || window.event,
opr = box.getElementsByTagName("p"),
oboxl = box.offsetLeft + cdisX;
for (var i = 0; i < arrn.length; i++) {
if (arrn[i] < oboxl) {
var index = i;
}
}
for (var i = 0; i < rows.length; i++) {
rows[i].cells[_this.cellIndex].innerHTML = "";
rows[i].cells[_this.cellIndex].innerHTML = rows[i].cells[index].innerHTML;
rows[i].cells[index].innerHTML = "";
rows[i].cells[index].innerHTML = opr[i].innerHTML;
};
box.innerHTML = "";
arrn.splice(0, arrn.length);
box.style.display = "none";
document.onmousemove = null;
document.onmouseup = null;
document.onselectstart = function () {
return false
};
};
};
};

}
Drag("tableSort");
</script>
</body>
</html>
JavaScript 实现表格按列拖动、排序、隔行换色

猜你喜欢
