Tukukkk

I have this function (used on a timeout due to my page loading time) to display information on my site. It is very clunky. As you can see in the code, certain values (current year, costume_exists boolean value) change the output of data being displayed. I grab this data from my table view that I load into the page. Is there an easier way of doing this?

setTimeout(function() {

  var table = document.getElementById("bands");

  var icon = "</i>";

  if (table != null) {

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

      for (var j = 0; j < table.rows[i].cells.length; j++)

        table.rows[i].cells[j].onclick = function() {

          if (this.cellIndex == 7) {

            if (!this.innerHTML.includes(icon)) {

                var $row = $(this).closest("tr");

                var $year = $row.find(".year").text();

                var $prize = $row.find(".prize").text();

                var $band = $row.find(".band").text();

                var $mp = $row.find(".mp").text();

                var $ge_music = $row.find(".ge_music").text();

                var $vp = $row.find(".vp").text();

                var $ge_visual = $row.find(".ge_visual").text();

                var $costume = $row.find(".costume").text();

                var $total = $row.find(".total").text();

                var $costumer = $row.find(".costumer").text();

                var $designer = $row.find(".designer").text();

                var $arranger = $row.find(".arranger").text();

                var $choreographer = $row.find(".choreographer").text();



                if ($costume.length > 1) {

                  costume_exists = true;

                } else {

                  costume_exists = false;

                }



                if ($mp.length > 0) {

                  playing_exists = true;

                } else {

                  playing_exists = false;

                }



                breakdown = "breakdown"

                if ($year < 1991 && costume_exists) {

                  breakdown = ('<h3>' + $band + " " + $year + '</h3>' +

                    '<i>' + getOrdinal($prize) + ' Prize' + '</i><br><br>' +

                    '<b>Music:</b> ' + $ge_music + '<br>' +

                    '<b>Presentation:</b> ' + $ge_visual + '<br>' +

                    '<b>Costume:</b> ' + $costume + '<br><br>' +

                    '<b>Total Points:</b> ' + $total + '<br><br>' +

                    '<b>Costumer:</b> ' + $costumer + '<br>' +

                    '<b>Costume/Set Designer:</b> ' + $designer + '<br>' +

                    '<b>Music Arranger:</b> ' + $arranger + '<br>' +

                    '<b>Choreographer:</b> ' + $choreographer + '<br>')

                  swal({

                    title: 'Point Breakdown',

                    html: breakdown

                  })

                } else if (costume_exists) {

                  breakdown = ('<h3>' + $band + " " + $year + '</h3>' +

                    '<i>' + getOrdinal($prize) + ' Prize' + '</i><br><br>' +

                    '<b>Music Playing:</b> ' + $mp + '<br>' +

                    '<b>General Effect Music:</b> ' + $ge_music + '<br>' +

                    '<b>Visual Performance:</b> ' + $vp + '<br>' +

                    '<b>General Effect - Visual:</b> ' + $ge_visual + '<br>' +

                    '<b>Costume:</b> ' + $costume + '<br><br>' +

                    '<b>Total Points:</b> ' + $total + '<br><br>' +

                    '<b>Costumer:</b> ' + $costumer + '<br>' +

                    '<b>Costume/Set Designer:</b> ' + $designer + '<br>' +

                    '<b>Music Arranger:</b> ' + $arranger + '<br>' +

                    '<b>Choreographer:</b> ' + $choreographer + '<br>')

                  swal({

                    title: 'Point Breakdown',

                    html: breakdown

                  })

                } else if (playing_exists) {

                  breakdown = ('<h3>' + $band + " " + $year + '</h3>' +

                    '<i>' + getOrdinal($prize) + ' Prize' + '</i><br><br>' +

                    '<b>Music Playing:</b> ' + $mp + '<br>' +

                    '<b>General Effect Music:</b> ' + $ge_music + '<br>' +

                    '<b>Visual Performance:</b> ' + $vp + '<br>' +

                    '<b>General Effect - Visual:</b> ' + $ge_visual + '<br><br>' +

                    '<b>Total Points:</b> ' + $total + '<br><br>' +

                    '<b>Costumer:</b> ' + $costumer + '<br>' +

                    '<b>Costume/Set Designer:</b> ' + $designer + '<br>' +

                    '<b>Music Arranger:</b> ' + $arranger + '<br>' +

                    '<b>Choreographer:</b> ' + $choreographer + '<br>')

                  swal({

                    title: 'Point Breakdown',

                    html: breakdown

                  })

                } else {

                  alert("No point breakdowns for " + $year + " are available.");

                }

              }

            }

          }

        }

    };

}, 700);