動態填充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>