JSFiddle - React, Tailwind, and code Playground

by maximua

HTML

<table cellspacing="5">
  <tr>
    <td><b>1st</b> place</td>
    <td>$
      <input name="1_place_prize" value="300" size=3 />
    </td>
    <td></td>
  </tr>
  <tr>
    <td><b>2nd</b> place</td>
    <td>$
      <input name="2_place_prize" value="150" size=3 />
    </td>
    <td></td>
  </tr>
  <tr>
    <td><b>3rd</b> place</td>
    <td>$
      <input name="3_place_prize" value="50" size=3 />
    </td>
    <td></td>
  </tr>
</table>
<br/>
<table id="stories" cellspacing="5" width="400">
  <tr>
    <td align=center width="60"><b>place</b></td>
    <td align=center><b>story title</b></td>
    <td align=center><b>votes</b></td>
    <td align=center><b>prize</b></td>
  </tr>
  <tr>
    <td></td>
    <td>First Story Title</td>
    <td align=center>
      <input name="votes" size=1 value=20 />
    </td>
    <td align=center></td>
  </tr>
  <tr>
    <td></td>
    <td>Second Story Title</td>
    <td align=center>
      <input name="votes" size=1 value=20 />
    </td>
    <td align=center></td>
  </tr>
  <tr>
    <td></td>
    <td>Third Story Title</td>
    <td align=center>
      <input name="votes" size=1 value=15 />
    </td>
    <td align=center></td>
  </tr>
  <tr>
    <td></td>
    <td>Fourth Story Title</td>
    <td align=center>
      <input name="votes" size=1 value=15 />
    </td>
    <td align=center></td>
  </tr>
  <tr>
    <td></td>
    <td>Fifth Story Title</td>
    <td align=center>
      <input name="votes" size=1 value=10 />
    </td>
    <td align=center></td>
  </tr>
  <tr>
    <td></td>
    <td>Sixth Story Title</td>
    <td align=center>
      <input name="votes" size=1 value=15 />
    </td>
    <td align=center></td>
  </tr>
  <tr>
    <td></td>
    <td>Seventh Story Title</td>
    <td align=center>
      <input name="votes" size=1 value=8 />
    </td>
    <td align=center></td>
  </tr>
  <tr>
    <td></td>
    <td>Eighth Story Title</td>
    <td align=center>
      <input name="votes" size=1 value=70 />
    </td>
    <td align=center></td>
  </tr>
 ...

JavaScript

$(document).ready(function() {
  $("input").change(function() {
    sortTable();
  });

  sortTable();
});

function sortTable() {
  var tbl = document.getElementById("stories").tBodies[0];
  var store = [];
  var prizes = 0;

  for (var i = 1, len = tbl.rows.length; i < len; i++) {
    var row = tbl.rows[i];
    var iEnum = parseFloat(row.cells[2].children[0].value);

    if (!isNaN(iEnum))
      store.push([iEnum, row]);
  }

  store.sort(function(x, y) {
    return y[0] - x[0];
  });

  for (var i = 0, len = store.length; i < len; i++) {
    var prev_votes = (i > 0) ? store[i - 1][0] : null;
    var curr_votes = store[i][0];
    var prev_row = (i > 0) ? store[i - 1][1] : null;
    var curr_row = store[i][1];

    if (curr_votes == prev_votes) {
      var prev_row_place = prev_row.cells[0].innerText;
      if (prev_row_place.indexOf("tied") < 0) {
        prev_row_place = i + "-tied.";
        prev_row.cells[0].innerText = prev_row_place;
      }
      curr_row.cells[0].innerText = prev_row_place;
      curr_row.setAttribute("prize_place", parseInt(prev_row_place));
    } else {
      curr_row.cells[0].innerText = i + 1 + ".";
      curr_row.setAttribute("prize_place", i + 1);
    }

    if (i < 3)
      curr_row.setAttribute("prize_money", document.getElementsByName((i + 1) + "_place_prize")[0].value);

    tbl.appendChild(curr_row);
  }

  //clean up last column
  $(tbl).find("td:last-child").empty();
  //clean money in last column
  updateMoney(1);
  updateMoney(2);
  updateMoney(3);

  store = null;
};

function updateMoney(iPlace) {
  //from Max - fuck it! use jquery, its much quicker :)
  var rows = $("[prize_place=" + iPlace + "]");
  if (rows.length > 0) {
    var allmoney = rows.prizeSum();
    rows.find("td:last").text("$" + (allmoney / rows.length).toFixed(2));
  }
};

$.prizeSum = $.fn.prizeSum = function() {
  var total = 0;
  this.each(function() {
    var money = $(this).attr("prize_money");
    if (typeof money !== typeof undefined && money !==...