CODEWITHSUNDEEP
javascripthtmlhtml-table
heltonbiker
heltonbiker

Reputation: 27615

Populate column of html table dynamically

I don't have much experience with javascript, and this is a hobby project.

The table below lists a number of location names, and their distances from the first location. This is intended as a travel guide, to be looked up during a trip so that I can estimate how far is what coming next.

I want to expand its usefulness by adding a click event to each row (or an <a></a> tag somewhere), so that when I click a row:

  1. Its value become zero;
  2. The other values become distances from that point;

So the question is: what approach I could use to get the current value (as an argument to the onclick, I imagine) and replace the other values so that they are somehow "remembered" and I can go on clicking on other rows and they become the zero-reference of the distance table?

<table>
    <tr><th>local</th><th>distância</th></tr>

    <tr><td>Chuí/Chuy</td><td>0</td></tr>
    <tr><td>La Coronilla</td><td>24</td></tr>
    <tr><td>Santa Tereza</td><td>33</td></tr>
    <tr><td>Punta del Diablo</td><td>40</td></tr>
    <tr><td>La Esmeralda</td><td>58</td></tr>
    <tr><td>El Cocal (camping)</td><td>66</td></tr>
    <tr><td>Castillos</td><td>74</td></tr>
    <tr><td>Aguas Dulces</td><td>84</td></tr>
    <tr><td>Valizas</td><td>90</td></tr>
    <tr><td>Cabo Polonio (port.)</td><td>97</td></tr>
    <tr><td>Oceania del Polonio</td><td>106</td></tr>
    <tr><td>Santa Isabel</td><td>130</td></tr>
    <tr><td>La Pedrera</td><td>133</td></tr>
    <tr><td>Arachania</td><td>137</td></tr>
    <tr><td>La Paloma</td><td>142</td></tr>
    <tr><td>Laguna Rocha</td><td>156</td></tr>
    <tr><td>Condominio Chique</td><td>170</td></tr>
    <tr><td>Laguna Garzon</td><td>187</td></tr>
    <tr><td>Arenas de J. Ignacio</td><td>193</td></tr>
    <tr><td>Jose Ignacio</td><td>195</td></tr>
    <tr><td>Santa Monica</td><td>202</td></tr>
    <tr><td>Baln. Buenos Aires</td><td>210</td></tr>
    <tr><td>El Chorro</td><td>212</td></tr>
    <tr><td>Manantiales</td><td>214</td></tr>
    <tr><td>Laguna Blanca</td><td>215</td></tr>
    <tr><td>La Barra</td><td>217</td></tr>
    <tr><td>Punta (los dedos)</td><td>228</td></tr>
    <tr><td>Punta Ballena</td><td>242</td></tr>
    <tr><td>Chihuahua</td><td>247</td></tr>
    <tr><td>Ocean Park</td><td>256</td></tr>
    <tr><td>Av. Americas Unidas<br/>(acesso Piriápolis)</td><td>257</td></tr>
    <tr><td>Punta Negra</td><td>265</td></tr>
    <tr><td>Punta Colorada</td><td>268</td></tr>
    <tr><td>San Francisco</td><td>270</td></tr>
    <tr><td>Piriápolis</td><td>275</td></tr>
    <tr><td>Playa Hermosa</td><td>279</td></tr>
    <tr><td>Las Flores<br/>(camp. El Eden)</td><td>283</td></tr>
    <tr><td>Bella Vista</td><td>286</td></tr>
    <tr><td>Baln. Solís</td><td>290</td></tr>
    <tr><td>Cuchilla Alta</td><td>302</td></tr>
    <tr><td>Santa Lucía del Este</td><td>306</td></tr>
    <tr><td>La Tuna</td><td>308</td></tr>
    <tr><td>Costa Azul</td><td>317</td></tr>
    <tr><td>Parque del Plata<br/>(camping del Parque)</td><td>322</td></tr>
    <tr><td>Atlántida</td><td>328</td></tr>
    <tr><td>Salinas<br/>(camping Albatros)<br/>(camping Playa Escondida)</td><td>355</td></tr>
    <tr><td>Ciudad de la Costa<br/>(Montevideo)</td><td>350</td></tr>
    <tr><td>Parque Roosevelt</td><td>355</td></tr>
    <tr><td>Playa Carrasco</td><td>359</td></tr>
    <tr><td>Playa Verde</td><td>364</td></tr>
    <tr><td>Playa Buceo</td><td>369</td></tr>
    <tr><td>Playa Pocitos</td><td>372</td></tr>
</table>

And if you're curious, this is the beautiful coast of Uruguay:

<iframe src="https://www.google.com/maps/d/embed?mid=z32qCUCL7tTQ.kOUOnp-ptcHw"
width="640" height="480"></iframe>

Pure javascript-based answers are preferred.

Upvotes: 2

Views: 1456

Answers (2)

heltonbiker
heltonbiker

Reputation: 27615

Inspired by @Barmar's answer, I came up with this pure javascript alternative:

<script type="text/javascript">
    function recalculate(event) {
        var thisRow = event.path[1];
        var distValue = thisRow.childNodes[1].innerHTML;

        for (var i = 1, row; row = table.rows[i]; i++) {
            var curDist = parseInt(row.cells[1].innerHTML)
            var newDist = curDist - distValue;
            row.cells[1].innerHTML = "" + newDist;
        };
    }

    var distances = []; 

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

    for (var i = 1, row; row = table.rows[i]; i++) {
        row.addEventListener('click', recalculate);
        var distance = parseInt(row.cells[1].innerHTML);
        distances.push(distance);
    }
</script>

Upvotes: 0

Barmar
Barmar

Reputation: 782344

Here's a jQuery solution. Put the original distances in the data-distance attribute of each distance field. Then use this in the calculations, rather than the text of the fields.

$("tr").click(function() {
  var thisRow = $(this);
  var thisValField = thisRow.find("td:nth-child(2)");
  var thisVal = thisValField.data("distance");
  thisValField.text("0");
  $(this).siblings().find("td:nth-child(2)").text(function() {
    var oldVal = $(this).data("distance");
    return Math.abs(thisVal - oldVal);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><th>local</th><th>distância</th></tr>

    <tr><td>Chuí/Chuy</td><td data-distance="0">0</td></tr>
    <tr><td>La Coronilla</td><td data-distance="24">24</td></tr>
    <tr><td>Santa Tereza</td><td data-distance="33">33</td></tr>
    <tr><td>Punta del Diablo</td><td data-distance="40">40</td></tr>
    <tr><td>La Esmeralda</td><td data-distance="58">58</td></tr>
    <tr><td>El Cocal (camping)</td><td data-distance="66">66</td></tr>
    <tr><td>Castillos</td><td data-distance="74">74</td></tr>
    <tr><td>Aguas Dulces</td><td data-distance="84">84</td></tr>
    <tr><td>Valizas</td><td data-distance="90">90</td></tr>
    <tr><td>Cabo Polonio (port.)</td><td data-distance="97">97</td></tr>
    <tr><td>Oceania del Polonio</td><td data-distance="106">106</td></tr>
    <tr><td>Santa Isabel</td><td data-distance="130">130</td></tr>
    <tr><td>La Pedrera</td><td data-distance="133">133</td></tr>
    <tr><td>Arachania</td><td data-distance="137">137</td></tr>
    <tr><td>La Paloma</td><td data-distance="142">142</td></tr>
    <tr><td>Laguna Rocha</td><td data-distance="156">156</td></tr>
    <tr><td>Condominio Chique</td><td data-distance="170">170</td></tr>
    <tr><td>Laguna Garzon</td><td data-distance="187">187</td></tr>
    <tr><td>Arenas de J. Ignacio</td><td data-distance="193">193</td></tr>
    <tr><td>Jose Ignacio</td><td data-distance="195">195</td></tr>
    <tr><td>Santa Monica</td><td data-distance="202">202</td></tr>
    <tr><td>Baln. Buenos Aires</td><td data-distance="210">210</td></tr>
    <tr><td>El Chorro</td><td data-distance="212">212</td></tr>
    <tr><td>Manantiales</td><td data-distance="214">214</td></tr>
    <tr><td>Laguna Blanca</td><td data-distance="215">215</td></tr>
    <tr><td>La Barra</td><td data-distance="217">217</td></tr>
    <tr><td>Punta (los dedos)</td><td data-distance="228">228</td></tr>
    <tr><td>Punta Ballena</td><td data-distance="242">242</td></tr>
    <tr><td>Chihuahua</td><td data-distance="247">247</td></tr>
    <tr><td>Ocean Park</td><td data-distance="256">256</td></tr>
    <tr><td>Av. Americas Unidas<br/>(acesso Piriápolis)</td><td data-distance="257">257</td></tr>
    <tr><td>Punta Negra</td><td data-distance="265">265</td></tr>
    <tr><td>Punta Colorada</td><td data-distance="268">268</td></tr>
    <tr><td>San Francisco</td><td data-distance="270">270</td></tr>
    <tr><td>Piriápolis</td><td data-distance="275">275</td></tr>
    <tr><td>Playa Hermosa</td><td data-distance="279">279</td></tr>
    <tr><td>Las Flores<br/>(camp. El Eden)</td><td data-distance="283">283</td></tr>
    <tr><td>Bella Vista</td><td data-distance="286">286</td></tr>
    <tr><td>Baln. Solís</td><td data-distance="290">290</td></tr>
    <tr><td>Cuchilla Alta</td><td data-distance="302">302</td></tr>
    <tr><td>Santa Lucía del Este</td><td data-distance="306">306</td></tr>
    <tr><td>La Tuna</td><td data-distance="308">308</td></tr>
    <tr><td>Costa Azul</td><td data-distance="317">317</td></tr>
    <tr><td>Parque del Plata<br/>(camping del Parque)</td><td data-distance="322">322</td></tr>
    <tr><td>Atlántida</td><td data-distance="328">328</td></tr>
    <tr><td>Salinas<br/>(camping Albatros)<br/>(camping Playa Escondida)</td><td data-distance="355">355</td></tr>
    <tr><td>Ciudad de la Costa<br/>(Montevideo)</td><td data-distance="350">350</td></tr>
    <tr><td>Parque Roosevelt</td><td data-distance="355">355</td></tr>
    <tr><td>Playa Carrasco</td><td data-distance="359">359</td></tr>
    <tr><td>Playa Verde</td><td data-distance="364">364</td></tr>
    <tr><td>Playa Buceo</td><td data-distance="369">369</td></tr>
    <tr><td>Playa Pocitos</td><td data-distance="372">372</td></tr>
</table>

Upvotes: 2

Related Questions