动态填充html表的列

Question

我对javascript没有太多经验，这是一个爱好项目。

下表列出了一些位置名称，以及它们与第一个位置的距离。这旨在作为旅行指南，在旅途中查阅，以便我可以估计接下来的路要走多远。

我想通过为每一行添加一个点击事件（或某处的<a></a>标签）来扩展它的用途，这样当我点击一行时：

1. 它的值变为零；
2. 其他值变为距该点的距离；

所以问题是：我可以使用什么方法来获取当前值（我想作为 onclick 的参数）并替换其他值，以便以某种方式“记住”它们，我可以继续点击在其他行上，它们成为距离表的零引用？

<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>

如果你好奇，这里就是乌拉圭美丽的海岸：

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

首选纯基于 javascript 的答案。

Answer 1

这是一个 jQuery 解决方案。将原始距离放在每个距离字段的data-distance 属性中。然后在计算中使用它，而不是字段的文本。

$("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>

Answer 2

受@Barmar 回答的启发，我想出了这个纯 javascript 替代方案：

<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>