How do I sort a whole element based off of one piece of it?

- 1 answer


I have a table with the general structure

  <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="">Accel World</a>

but with many more table rows, each having a td with an index and another td with an 'a element' with the title of a show and a place to find said show.

I end up sorting it, alphabetically based off the text content of the a element, the stuff inside the tag. I then sort all of those outside as an array and plug them back into the element. The problem is the href didn't move. I sorted the text Content but not the hyper reference link the text corresponds to.

How can I sort it to where the hyper reference corresponds to the text within-the title? Keep in mind, I can't sort it based off the href and plug it in because there are too many special cases which make it not work.

Here is my code so far, you can ignore the parseText as it is what generates the table.

function parseText(file, tableNumb, link) {
var xhr = new XMLHttpRequest();'GET', file, true);
xhr.onload = function () {
    if(xhr.status === 200) {
        var response = xhr.responseText;
        var reg = /[^|(\r\n|\n|\r)]+/g;
        var regResponse = response.match(reg);
        var table = document.getElementById(tableNumb);
        var length = 0;
        var tIndex = 1; //get the length of the table to match number count
        var count = 0;
        var links = [];
        for(i = length; i < regResponse.length/2;i++){ 
            var row = table.insertRow(-1);
            var cell = row.insertCell(-1);
            var cell1 = row.insertCell(-1);
            cell.innerHTML = tIndex;
            cell1.innerHTML = '<a href=\'' + regResponse[count+1] + '\'>' + regResponse[count] + '</a>';
            link[i] = regResponse[count];
        sorted(link); //keep

    var sortList = document.getElementById("one");
    var link = sortList.getElementsByTagName("a");

    var sortList2 = document.getElementById("two");
    var link1 = sortList2.getElementsByTagName('a');
    var sortList3 = document.getElementById("three");
    var link2 = sortList3.getElementsByTagName('a');

parseText('Watched.txt', 'one', link);
parseText('Watching.txt', 'two', link1);
parseText('Dropped.txt', 'three', link2);

function sorted(sortList) {
    var sibling = [];

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


    function insensitive(s1, s2) {
      var s1lower = s1.toLowerCase();
      var s2lower = s2.toLowerCase();
      return s1lower > s2lower ? 1 : (s1lower < s2lower? -1 : 0);

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



Here is some data from a table:

Attack on Titan|
Kyoukai no Kanata|
Log Horizon|
Mahou Shoujo Madoka Magica|
Neon Genesis Evangelion|
Space Dandy|
Tengen Toppa Gurren Lagann|
Ore Monogatari|
Yahari Ore no Seishun Love Come wa Machigatteiru|



Firstly, this is a prime example of when you should be using a framework. To do something like you want using say angular can be done with much less code and be more easily maintainable. With that being said, I quickly put together a fiddle using pure js to solve what I think you are looking for:

// given a url, return the responseText in a callback
function ajaxText(url, cb) {
    var xhr = new XMLHttpRequest();'GET', url, true);
    xhr.onload = function(){
        if(xhr.status === 200) {
            var response = xhr.responseText;
            cb(null, response);
    xhr.onerror = function(err){

// convert text string into a list of items
function listFromText(text){
    var list = [];

    var reg = /[^|(\r\n|\n|\r)]+/g;
    var regResponse = text.match(reg);

    for(var i=0; i<regResponse.length; i+=2){
            title: regResponse[i],
            href: regResponse[i+1]

    return list;

// function for performing lower case sorting on items
function sorter(a, b){
    var s1lower = a.title.toLowerCase();
    var s2lower = b.title.toLowerCase();
    return s1lower > s2lower ? 1 : (s1lower < s2lower? -1 : 0);

// function for building the table html from a list
function buildTable(id, list){
    var table = document.getElementById(id);
    for(var i=0; i<list.length; i++){
        var row = table.insertRow(-1);
        var cell = row.insertCell(-1);
        var cell1 = row.insertCell(-1);

        cell.innerHTML = i;
        cell1.innerHTML = '<a href=\'' + list[i].href + '\'>' + list[i].title + '</a>';

// get the text via ajax from a gist i created
ajaxText('', function(err, resultText){
    // get the unsorted list
    var tableList = listFromText(resultText);
    // sort the list
    // build the html from the sorted list
    buildTable('1', tableList);