动态填充html表的列

Question

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

下表列出了许多位置名称及其与第一个位置的距离。这是作为旅行指南的目的，在旅行期间被抬头看，以便我可以估计接下来会有多远。

我希望通过添加一个click事件的每一行（或<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>