は、どのように私は、その特性が、それは正しい関数

Question

テストページを発射するように、私が操作している要素にアクセスしますもう一度クリックすると、期待どおりにテーブル行が消えず、実際には未アーカイブボタンのように動作します。私は.onを使用しているだろうjQueryので

（、 'クリック' ...要素にアクセスするにはどのように私はネイティブJavaScriptでこれを達成ん、動的に変更

サンプルコード：？

<table border="1" class="i8_zebra"> 
    <thead> 
    <tr> 
     <th>Quote #</th> 
     <th>Date</th> 
     <th>Client</th> 
     <th>Sub Total</th> 
     <th>Shipping</th> 
     <th>Install</th> 
     <th>Misc. Charges</th> 
     <th>Customer Savings</th> 
     <th>Tax</th> 
     <th>Grand Total</th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr data-id="206"> 
     <td class="textCenter"><a href="/salesplustools/quotes/details/206">206</a></td> 
     <td class="textCenter">March 8th, 2015</td> 
     <td>Matthew Ward 123 Magnolia St Hempstead NY 11550-1234</td> 
     <td class="textRight">$6849.96</td> 
     <td class="textRight">$50.00</td> 
     <td class="textRight">$100.00</td> 
     <td class="textRight">$0.00</td> 
     <td class="textRight"><span class="hilite-red">-$750.00</span></td> 
     <td class="textRight">0.00</td> 
     <td class="textRight">$6249.96</td> 
     <td class="textCenter"><input class="btn btn-sm btn-gray" type="button" name="row_Delete_206" value="Archive Quote" data-id="206"></td> 
    </tr> 
    <tr data-id="204"> 
     <td class="textCenter"><a href="/salesplustools/quotes/details/204">204</a></td> 
     <td class="textCenter">March 5th, 2015</td> 
     <td>Matthew Ward 123 Magnolia St Hempstead NY 11550-1234</td> 
     <td class="textRight">$2199.98</td> 
     <td class="textRight">$80.00</td> 
     <td class="textRight">$0.00</td> 
     <td class="textRight">$0.00</td> 
     <td class="textRight"><span class="hilite-red">-$255.00</span></td> 
     <td class="textRight">131.62</td> 
     <td class="textRight">$2156.60</td> 
     <td class="textCenter"><input class="btn btn-sm btn-blue" type="button" name="row_Add_204" value="Unarchive Quote" data-id="204"></td> 
    </tr> 
    <tr data-id="203"> 
     <td class="textCenter"><a href="/salesplustools/quotes/details/203">203</a></td> 
     <td class="textCenter">March 5th, 2015</td> 
     <td>Matthew Ward Apt C 5800 Springfield Gardens Springfield VA 22162-1058</td> 
     <td class="textRight">$5099.97</td> 
     <td class="textRight">$80.00</td> 
     <td class="textRight">$0.00</td> 
     <td class="textRight">$0.00</td> 
     <td class="textRight"><span class="hilite-red">-$350.00</span></td> 
     <td class="textRight">311.12</td> 
     <td class="textRight">$5141.09</td> 
     <td class="textCenter"><input class="btn btn-sm btn-blue" type="button" name="row_Add_203" value="Unarchive Quote" data-id="203"></td> 
    </tr> 
    <tr data-id="127"> 
     <td class="textCenter"><a href="/salesplustools/quotes/details/127">127</a></td> 
     <td class="textCenter">December 30th, 2014</td> 
     <td>Matthew Ward Apt C 5800 Springfield Gardens Springfield VA 22162-1058</td> 
     <td class="textRight">$4898.99</td> 
     <td class="textRight">$0.00</td> 
     <td class="textRight">$0.00</td> 
     <td class="textRight">$0.00</td> 
     <td class="textRight"><span class="hilite-red">-$200.00</span></td> 
     <td class="textRight">0.00</td> 
     <td class="textRight">$4698.99</td> 
     <td class="textCenter"><input class="btn btn-sm btn-gray" type="button" name="row_Delete_127" value="Archive Quote" data-id="127"></td> 
    </tr> 
    <tr data-id="4"> 
     <td class="textCenter"><a href="/salesplustools/quotes/details/4">4</a></td> 
     <td class="textCenter">September 15th, 2014</td> 
     <td>Matthew Ward Apt C 5800 Springfield Gardens Springfield VA 22162-1058</td> 
     <td class="textRight">$6348.98</td> 
     <td class="textRight">$0.00</td> 
     <td class="textRight">$0.00</td> 
     <td class="textRight">$0.00</td> 
     <td class="textRight"><span class="hilite-red">-$0.00</span></td> 
     <td class="textRight">0.00</td> 
     <td class="textRight">$6348.98</td> 
     <td class="textCenter"><input class="btn btn-sm btn-blue" type="button" name="row_Add_4" value="Unarchive Quote" data-id="4"></td> 
    </tr> 
    </tbody> 
</table> 
<script type="text/javascript"> 
// <![CDATA[ 

// fade out see http://www.chrisbuttery.com/articles/fade-in-fade-out-with-javascript/ 

function fadeOut(el){ 
    el.style.opacity = 1; 

    (function fade() { 
    if ((el.style.opacity -= .1) < 0) { 
     el.style.display = "none"; 
    } else { 
     requestAnimationFrame(fade); 
    } 
    })(); 
} 

var archiveQuote = function(event) { 

    event.preventDefault(); // we don't want the link to be followed (default browser behavior) 
    var target = event.target; // get the event target (what `this` would refer to in jQuery) 
    var pkID = target.getAttribute('data-id'); // the id we need to pass for archiving 
    var parent = target.closest('tr'); // find the table row that we need to remove 
    target.blur(); // clear focus 
    var nm = target.getAttribute('name'); // the name of the button pressed 
    console.log(nm); 

    // fade out row 
    fadeOut(parent); 

} 

var unarchiveQuote = function(event) { 

    event.preventDefault(); // we don't want the link to be followed (default browser behavior) 
    var target = event.target; // get the event target (what `this` would refer to in jQuery) 
    var pkID = target.getAttribute('data-id'); // the id we need to pass for unarchiving 
    target.blur(); // clear focus 
    var nm = target.getAttribute('name'); // the name of the button pressed 
    console.log(nm); 

    // change button 
    var btnName = target.getAttribute('name'); 
    target.classList.remove('btn-blue');    
    target.classList.add('btn-gray'); 
    target.value = 'Archive Quote'; 
    target.setAttribute('name', btnName.replace('_Add_','_Delete_')); 

} 

var btnArchive = document.querySelectorAll('[name^="row_Delete_"]'); 
for(var i = 0; i < btnArchive.length; i++) { // loop thru all elements starting with... 
    btnArchive[i].addEventListener('click', function(event) { 
    archiveQuote.call(this, event); 
    }, false); 
} 

var btnUnarchive = document.querySelectorAll('[name^="row_Add_"]'); 
for(var i = 0; i < btnUnarchive.length; i++) { // loop thru all elements starting with... 
    btnUnarchive[i].addEventListener('click', function(event) { 
    unarchiveQuote.call(this, event); 
    }, false); 
} 

// ]]> 
</script> 

Answer 1

ます（https://jsfiddle.net/krsmhLav/）のように、「アーカイブ」に変更するボタンに、アーカイブ機能を添付する必要があります。

var unarchiveQuote = function(event) { 
    ... 
    target.setAttribute('name', btnName.replace('_Add_','_Delete_')); 

    *target.addEventListener('click', function(event) { 
    archiveQuote.call(this, event); 
    }, false);* 
}