对具有嵌套表的复杂表进行排序（但是没有输出tablesorter）

时间：2017-10-17 14:55:44

标签： html css html-table

我请你先放纵我的无知：我真的不知道我在说什么。但我已经找到了我所拥有的问题的各种答案，而没有找到任何我可以采纳/适应我的情况的答案。

我正在尝试构建一个相当复杂的HTML表，它在单元格内部（重复地）有一个嵌套表。基本上如下。我正在与w3schools网站合作，这帮助我走得那么远。我不想将任何内容下载到我将使用此表的网站上。 （我甚至不理解为什么我会对下载的文件做什么或做什么。）我只是觉得必须有一种方法来编辑脚本以忽略嵌套的单元格。通过区分父母和子女的细胞？

表格的结构可能看起来很奇怪，有四条不可见的行＆＃39;在前面，但它是我能想出的最好的方式，通过不同的参数实质上排序一个表格单元格。

我很确定我不想使用餐桌分拣机......我根本不明白......＆＃34;如何 - 排序餐桌＆＃34;到目前为止，w3Schools对我来说更有意义。

（我甚至不知道如何在这里正确地将coda格式化为代码;我正在缩进它，但弹出窗口仍然抱怨。）

另外：我希望完全控制表的属性/外观。

我为下面可能是一团糟而道歉。我在这里保存了基本代码：https://www.w3schools.com/code/tryit.asp?filename=FKLMTNSMVKET 

        <!DOCTYPE html>
<html>
<head>
<style>
            .CD_text
            {
                font-family:    arial, Helvetica, sans-serif;
                font-size:      85%;
                text-align:  center;
            }
            .SORTING_text
            {
                font-family:    arial, Helvetica, sans-serif;
                color:    whitesmoke;
                font-size:      1%;
                text-align:  center;
            }
            .ENSEMBLE_text
            {
                font-family:    Georgia, Times New Roman, serif;
                font-weight: normal;
                font-size:      110%;
                text-align:  left;
            }
            .DESCRIPTION_text
            {
                font-family:    Arial, Times New Roman, serif;
                font-weight: normal;
                font-size:      100%;
                text-align:  left;
            }

table, td, th {
    border: 1px dotted black;
    border-collapse: collapse;
}

</style>
</head>
<body>

<h3>Beethoven Symphony Survey</h3>

<table id="myTable">
  <tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th onclick="sortTable(0)"><div class="DESCRIPTION_text">Name ⇕</div></th>
    <th onclick="sortTable(1)"><div class="DESCRIPTION_text">Orchestra ⇕</div></th>
    <th onclick="sortTable(2)"><div class="DESCRIPTION_text">Label ⇕</div></th>
    <th onclick="sortTable(3)"><div class="DESCRIPTION_text">Year Comp. ⇕</div></th>    
  </tr>
  <tr>
    <td><!--Abbado--></td>
    <td><!--Vienna Phil--></td>
    <td><!--DG--></td>
    <td><!--YEAR1--></td>

    <td colspan="4" data-sort-method='none'>
        <Table>
        <tr>    <td colspan="4">Claudio Abbado, Vienna Philharmonic
        <br>DG, 1990</td></tr>
        <tr>    
        <td>IMAGE<br>Text
        </td>
        <td>IMAGE<br>Text
        </td>
        <td>IMAGE<br>Text
        </td>
        <td>IMAGE<br>Text
        </td>
        </tr>
        </Table>
    </td>

  </tr>
  <tr>
    <td><!--Abbado--></td>
    <td><!--Berlin Phil I--></td>
    <td><!--DG--></td>
    <td><!--YEAR2--></td>


    <td colspan="4" data-sort-method='none'>
        <Table>
        <tr>    <td colspan="4">Claudio Abbado, Vienna Philharmonic
        <br>DG, 1990</td></tr>
        <tr>    
        <td>IMAGE<br>Text
        </td>
        <td>IMAGE<br>Text
        </td>
        <td>IMAGE<br>Text
        </td>
        <td>IMAGE<br>Text
        </td>
        </tr>
        </Table>
      </td>
    </tr>
<tr>
    <td><!--Abbado--></td>
    <td><!--Berlin Phil II--></td>
    <td><!--DG--></td>
    <td><!--YEAR3--></td>

    <td colspan="4" data-sort-method='none'>
        <Table>
            <tr>    <td colspan="4">Claudio Abbado, Vienna Philharmonic
            <br>DG, 1990</td></tr>
            <tr>    
            <td>IMAGE<br>Text
            </td>
            <td>IMAGE<br>Text
            </td>
            <td>IMAGE<br>Text
            </td>
            <td>IMAGE<br>Text
            </td>
            </tr>
            </Table>
        </td>
    </tr>
<tr>
    <td><!--Albrecht--></td>
    <td><!--Yomiuri Nippon--></td>
    <td><!--Exton--></td>
    <td><!--YEAR4--></td>

    <td colspan="4" data-sort-method='none'>
        <Table>
            <tr>    <td colspan="4">Gerhard Albrecht, Yomiuri Nippon
        <br>Exton, 1993</td></tr>
            <tr>    
            <td>IMAGE<br>Text
            </td>
            <td>IMAGE<br>Text
            </td>
            <td>IMAGE<br>Text
            </td>
            <td>IMAGE<br>Text
            </td>
            </tr>
            </Table>
        </td>
    </tr>
<tr>
    <td><!--Karajan--></td>
    <td><!--Philharmonia--></td>
    <td><!--Exton--></td>
    <td><!--YEAR5--></td>

    <td colspan="4" data-sort-method='none'>
        <Table>
            <tr>    <td colspan="4">Herbert von Karajan, Berlin Philharmonic
        <br>DG, 1975</td></tr>
            <tr>    
                <td>IMAGE<br>Text</td>

                <td>IMAGE<br>Text</td>

                <td>IMAGE<br>Text</td>

                <td>IMAGE<br>Text</td>
            </tr>
        </Table>
    </td>
</tr>
</table>



</body>
</html>

    <script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc"; 
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.getElementsByTagName("TR");
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;      
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

</body>
</html>

1 个答案:

答案 0 :(得分：1)

假设您想要使用该JS代码，最简单的解决方案是删除子表并用DIV替换图像块，如下所示：

＆＃13;
＆＃13; 
observable.map(RxMapWrapper.wrapAndThrow(new RxMapWrapper.Func1Wrapper<A, B>() {
        @Override
        public B call(A document) throws Exception {
            // your map logic here ...
        }
    }))

public class RxMapWrapper {
    public static <T, R> Func1<T, R> wrapAndThrow(Func1Wrapper<T, R> caughtFunction) {
        return t -> {
            try {
                return caughtFunction.call(t);
            } catch (Exception e) {
                throw Exceptions.propagate(e);
            }
        };
    }

    public interface Func1Wrapper<T, R> extends Function {
        R call(T t) throws Exception;
    }
}
＆＃13; 
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc";
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.getElementsByTagName("TR");
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount++;
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
＆＃13; 
.CD_text {
  font-family: arial, Helvetica, sans-serif;
  font-size: 85%;
  text-align: center;
}

.SORTING_text {
  font-family: arial, Helvetica, sans-serif;
  color: whitesmoke;
  font-size: 1%;
  text-align: center;
}

.ENSEMBLE_text {
  font-family: Georgia, Times New Roman, serif;
  font-weight: normal;
  font-size: 110%;
  text-align: left;
}

.DESCRIPTION_text {
  font-family: Arial, Times New Roman, serif;
  font-weight: normal;
  font-size: 100%;
  text-align: left;
}

table,
td,
th {
  border: 1px dotted black;
  border-collapse: collapse;
}
＆＃13;
＆＃13;
＆＃13;

请原谅我的示例中的内联CSS。您将要将其移至样式表。您还希望使用隐藏列更正数据输入难度。

但这应该会或多或少地起作用。

相关问题
最新问题