Desarrolallar pequeña factura y detalles

[America|UNK]

Código javascript:

<style type="text/css">#factura td{cursor:pointer} .sel {background:#333;color:white} </style>
<i>Click en el detalle para seleccionar</i>
<table id="factura">
    <tr><th>Detalle</th><th rel="precio">Precio</th></tr>
    <tr><td>Item 1</td><td>200</td></tr>
    <tr><td>Item 2</td><td>100</td></tr>
    <tr><td>Item 3</td><td>180</td></tr>
    <tr><th colspan="2">Total: <b id="total">0</b></th></tr>
</table>
 
<script type="text/javascript">
Object.prototype.hasClass = function(className) {   var pattern = new RegExp('(^|\\s)' + className + '(\\s|$)');   return pattern.test(this.className)}
Object.prototype.addClass = function(className) {   if (!this.hasClass(className)) {  this.className += (' ' + className) }}
Object.prototype.removeClass = function(className) {  var pattern = new RegExp('(^|\\s)' + className + '(\\s|$)');   this.className = this.className.replace(pattern, ' ');}
 
function inicio(idf,idt,relp){
    var d = document, f = d.getElementById(idf), tr = f.getElementsByTagName('tr'), i;
    var h = tr[0].getElementsByTagName('th'), x, index = 0;
    for(x=0;x<h.length;x++){if(h[x].getAttribute("rel")==relp){index = x}}
    for(i=1;i<tr.length-1;i++){
        tr[i].onclick = function(){
            var val = parseInt(this.getElementsByTagName('td')[index].innerHTML), t = d.getElementById(idt), ahora =  parseInt(t.innerHTML);
            if(!this.hasClass('sel')){  this.addClass('sel');t.innerHTML =  ahora + val;}else{  this.removeClass('sel'); t.innerHTML =  ahora - val;}
        }
    }
}
inicio('factura','total','precio') //ID tabla factura, ID total, REL precio
</script>
 

La función inicio crea eventos a los detalles para sumar al total si el detalle està seleccionado.