Comment imprimer une variable Javascript dans une table?

Question

Dans une table je fais que j'ai une variable de bouton radio nommée 'coût' et je veux imprimer la variable 'cost' dans le pied de page du formulaire dans une phrase comme 'Faire le check out pour <>'

S'il vous plaît, quelqu'un peut-il donner des conseils sur la façon de le faire? Un grand merci, TEH

<table id="gradient-style" summary="Throttle Conversion"> 
    <thead> 
     <tr> 
      <th scope="col">Existing Throttle</th> 
      <th scope="col">Upgrade To</th> 
      <th scope="col">Additional Features</th> 
      <th scope="col"></th> 
      <th scope="col"></th> 
      <th scope="col">Upgrade Price</th> 
      <th scope="col">Select One</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td></td> 
      <td></td> 
      <td><strong><center>29 Functions</td> 
      <td><strong><center>Simplex Radio</td> 
      <td><strong><center>Duplex Radio</td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td>DT400</td> 
      <td>DT402</td> 
      <td><center>*</td> 
      <td></td> 
      <td></td> 
      <td>$25.00</td> 
      <td><input type="radio" name="cost" value="25"></td> 
     </tr> 
     <tr> 
      <td>DT400</td> 
      <td>DT402R</td> 
      <td><center>*</td> 
      <td><center>*</td> 
      <td></td> 
      <td>$50.00</td> 
      <td><input type="radio" name="cost" value="50"></td> 
     </tr> 
     <tr> 
      <td>DT400</td> 
      <td>DT40D</td> 
      <td><center>*</td> 
      <td></td> 
      <td><center>*</td> 
      <td>$65.00</td> 
      <td><input type="radio" name="cost" value="65"></td> 
     </tr> 
     <tr> 
      <td>DT400R</td> 
      <td>DT402R</td> 
      <td><center>*</td> 
      <td><center>*</td> 
      <td></td> 
      <td>$25.00</td> 
      <td><input type="radio" name="cost" value="25"></td> 
     </tr> 
      <tr> 
      <td>DT400R</td> 
      <td>DT402D</td> 
      <td><center>*</td> 
      <td></td> 
      <td><center>*</td> 
      <td>$65.00</td> 
      <td><input type="radio" name="cost" value="65"></td> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
     <td colspan="7"> Based on your selection, the conversion cost is <?php $_post["cost"]?>  </td> 
     </tr> 
    </tfoot> 
</table> 

Answer 1

Cela le ferait:

var table = document.getElementById('gradient-style'); 
var inputs = table.getElementsByTagName('input'); 
var radios = []; 
var span = document.getElementById('cost_marker'); 

for(var x = 0; x < inputs.length; x++) { 
    if(inputs[x].type == 'radio' && inputs[x].name == 'cost') { 
     inputs[x].onclick = function() { 
      span.innerHTML = '$' + parseFloat(this.value).toFixed(2); 
     } 
    } 
} 

Le seul changement que vous devez faire à votre balisage est d'ajouter une balise span autour du coût avec un ID de « cost_marker » de sorte que Javascript sait où mettre à jour le coût:

<tr> 
    <td colspan="7"> 
    Based on your selection, the conversion cost is 
    <span id='cost_marker'><?php $_post["cost"]?></span> 
    </td> 
</tr> 

And here's an example of it at work.