여러 TD에 원장 합계 추가

Question

이 코드는 원장을 생성합니다. 나는 그것을 최소한으로 좁혔다. 더하기 기호를 클릭하면 원장에 추가 행이 추가됩니다.

각 변수의 합계를 newAmount 추가하고 각 행의 오른쪽에 TD로 업데이트 된 총계를 찾습니다. 나는 newAmount.id = "mainAmount";을 만들어 고유 ID를 만들어 이것이 도움이 될 것이라고 생각했다. 단일 행을 추가하면, 그것은 더하기 기호를 클릭처럼 보이는보다는

var mainNumber = 0; 

function addElement() 
{ 

    //add a number for each row 
    mainNumber++; 


    //create each row, id each slot, and add it where it goes 
    newDiv = document.createElement("div"); 
    newDiv.id = "main"; 
    newTable = document.createElement("table"); 
    newTable.id = "mainTable"; 
    newDiv.appendChild(newTable); 
    newTr = document.createElement("tr") 
    newTr.id = (mainNumber); 
    newTr.className = "mainRow"; 
    newTable.appendChild(newTr); 
    newAmount = document.createElement("td"); 
    newAmount.id = "mainAmount"; 
    newAmount.className = (mainNumber); 
    newPlus = document.createElement("td"); 
    newPlus.id = "mainPlus"; 
    newTotalTable = document.createElement("table"); 
    newDiv.appendChild(newTotalTable); 
    newTotalTable.id = "mainTotalTable"; 
    newTotalTr = document.createElement("tr"); 
    newTotalTable.appendChild(newTotalTr); 
    newTotalTr.id = "mainTotalTr"; 
    newTotalTd = document.createElement("td"); 
    newTotalTd.id = "mainTotalTd" + (mainNumber); 
    newTr.appendChild(newAmount); 
    newTotalTr.appendChild(newTotalTd); 

    //whats default inside of each slot 
    newAmount.innerHTML = '<form name="formAmount"><textarea name="textAmount" size="25" onfocus="wait();" id="amount' + (mainNumber) + '">0</textarea>'; 
    newTr.appendChild(newPlus); 

    //click this to add a row 
    newPlus.innerHTML = '<a href="#" onclick="addElement();"><img src="images/plus.png"></a>'; 


    // add the newly created element and it's content into the DOM 
    my_div = document.getElementById("mainAnchor"); 
    document.body.insertBefore(newDiv, my_div); 

} 

//doesn't work...trying to hover over any row and show var idName in console 
function trHover(){ 
$('tr').hover(function() { 
    var idName = $('tr'+'#'+(mainNumber)).attr('id');      
    console.log(idName); 
}); 
} 

//when you focus on amount box, this is activated, which adds attribute onblur and stars addTotal 
function wait(){ 
var blurred = $(this).attr("onblur"); 
blurred = addTotal(); 
} 

//adds total and displays it in td to the right 
function addTotal(){ 
var y = 1; 
var sum = 0; 
var input; 
while((input = document.getElementById('amount'+y))) { 
    sum += parseInt(input.value); 
    ++y; 
    console.log(sum); 
    $("#mainTotalTd1").text(sum); 
} 
} 

Answer 1

는 사업부와 두 테이블을 추가, 그래서 당신이 거기가는 무엇 확실하지 않다. 그래도 호버 기능을 수정할 수 있습니다.

$('tr').hover(function() { 
    var idName = $(this).attr('id'); // 'this' is the element being hovered 
    console.log(idName); 
});