加了后不能用了，请问该怎样解决？

爵罗先生 2011-10-07 06:44:58

哪位高手能看看，加上<!DOCTYPE html>就不能用了，去掉又正常，但是不加这个会显示不出效果来
demo.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script type="text/javascript" src="table.js" > </script>

</head>

<body>

<table border="1" id="tblSort">

  <thead>

    <tr>

      <th onclick="sortTableByColumn('tblSort',0,'en',0,0)" style="cursor:pointer">Last Name</th>

      <th onclick="sortTableByColumn('tblSort',1,'date',0,0)" style="cursor:pointer">Date</th>

      <th onclick="sortTableByColumn('tblSort',2,'int',0,0)" style="cursor:pointer">Salary</th>

      <th onclick="sortTableByColumn('tblSort',3,'int',0,0)" style="cursor:pointer">Age</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Smith</td>

      <td>2008/9/20</td>

      <td>100.03</td>

      <td>20</td>

    </tr>

    <tr>

      <td>Johnson</td>

      <td>2008/10/4</td>

      <td>200.8</td>

      <td>18</td>

    </tr>

    <tr>

      <td>Henderson</td>

      <td>2008/10/11</td>

      <td>50.3</td>

      <td>45</td>

    </tr>

    <tr>

      <td>Williams</td>

      <td>2008/10/08</td>

      <td>50</td>

      <td>20</td>

    </tr>

    <tr>

      <td>Gilliam</td>

      <td>2008/10/3</td>

      <td>400.2</td>

      <td>9</td>

    </tr>

    <tr>

      <td>Walker</td>

      <td>2009/1/4</td>

      <td>20.6</td>

      <td>20</td>

    </tr>

    <tr>

      <td>xiaoming</td>

      <td>2002/6/4</td>

      <td>20.5</td>

      <td>20</td>

    </tr>

  </tbody>

</table>

</body>

</html>

table.js

spanSrc = document.createElement("<span>");

spanSrc.innerHTML = "▼";

var f = this.spanSrc.cloneNode(true);

function ieOrFireFox(ob) {

    if (ob.textContent != null) return ob.textContent;

    var s = ob.innerText;

    return s.substring(0, s.length)

}

function addSortSymbols(header, px) {

    if (px == "asc") f.innerHTML = "▲";

    else f.innerHTML = "▼";

    f.style.visibility = 'visible';

    header.appendChild(f)

}

function sortTableByColumn(sortTableId, iCol, dataType, start, end) {

    var sortTable = document.getElementById(sortTableId);

    var tbody = sortTable.tBodies[0];

    var colRows = tbody.rows;

    var aTrs = new Array;

    var sortedHeader = sortTable.rows[0].cells[iCol];

    f.style.visibility = 'hidden';

    var unSortRows = new Array;

    var j = 0;

    for (var i = 0; i < colRows.length; i++) {

        if (i >= start && i <= colRows.length - end - 1) aTrs[i - start] = colRows[i];

        else unSortRows[j++] = colRows[i]

    }

    if (sortTable.sortCol == iCol) {

        if (sortTable.sortOrder == "desc") {

            aTrs.sort(compareEle(iCol, dataType, 'asc'));

            sortTable.sortOrder = "asc"

        } else {

            aTrs.sort(compareEle(iCol, dataType, 'desc'));

            sortTable.sortOrder = "desc"

        }

    } else {

        aTrs.sort(compareEle(iCol, dataType, 'asc'));

        sortTable.sortOrder = "asc"

    }

    addSortSymbols(sortedHeader, sortTable.sortOrder);

    sortTable.sortCol = iCol;

    var oFragment = document.createDocumentFragment();

    j = 0;

    if (start != 0) for (var i = 0; i < start; i++) {

        oFragment.appendChild(unSortRows[j++])

    }

    for (var i = 0; i < aTrs.length; i++) {

        oFragment.appendChild(aTrs[i])

    }

    if (end != 0) for (var i = 0; i < end; i++) {

        oFragment.appendChild(unSortRows[j++])

    }

    tbody.appendChild(oFragment)

}

function convert(sValue, dataType, sortDerection) {

    switch (dataType) {

    case "int":

        if (sValue.length <= 0) {

            sValue = "-999999999"

        }

        return parseInt(sValue, 10);

    case "float":

        return parseFloat(sValue);

    case "date":

        return new Date(Date.parse(sValue));

    default:

        return sValue.toString().toLowerCase()

    }

}

function compareEle(iCol, dataType, sortDerection) {

    return function(oTR1, oTR2) {

        var returnResult = 0;

        if (dataType == "cn") {

            returnResult = (ieOrFireFox(oTR1.cells[iCol])).localeCompare(ieOrFireFox(oTR2.cells[iCol]))

        } else {

            var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType, sortDerection);

            var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType, sortDerection);

            if (vValue1 < vValue2) {

                returnResult = -1

            } else if (vValue1 > vValue2) {

                returnResult = 1

            } else {

                returnResult = 0

            }

        }

        if (sortDerection == "desc") {

            return - returnResult

        } else {

            return returnResult

        }

    }

}