イベント泡が出たらテーブルの一行を削除します.

5035 ワード

JavaScript

onclick事件
実際のアプリケーションでは、特にシステムのバックグラウンド管理を書く際に、テーブルの関連操作が重要になります.不合理なイベントの追加は効率に影響します.具体的なコードは以下の通りです.


<html>
<head>
    <meta charset="utf-8">
    <title>title>
    <script type="text/javascript">
        window.onload = function(){
            var oTab = document.getElementsByTagName('table')[0];

            oTab.onclick = function(ev){
                var tab = this;
                var ev = ev || window.event;
                var oTr = ev.target.parentNode.parentNode;
                if(oTr.nodeName.toLowerCase() === 'tr'){    
                    tab.deleteRow(oTr.rowIndex);                        
                }   
            }
        }
    script>
head>
<body>
    <table>
        <tr>
            <th>  th>
            <th>  th>
            <th>  th>
        tr>
        <tr>
            <td>Vamoustd>
            <td>19td>
            <td><a href="#">  a>td>
        tr>
        <tr>
            <td>Vamtd>
            <td>20td>
            <td><a href="#">  a>td>
        <

/tr>
    table>
body>
html>

このページでは簡単にテーブルを書いています.データに対応するtr行には「削除」というラベルが含まれています.これは利用者に見てもらうだけです.本当にクリックした後の削除イベントはテーブルに追加しました.ev.target.parent Node.parexNodeを利用して現在のクリックラインを獲得しました.とても良いのはテーブルの中にrowIndeという属性があります.ちょうどdeleteRowという関数を組み合わせて実用化して、ある程度の面倒を省きました.
イベントの不合理な追加はページのローディング効率に影響します.特に重複イベントを追加する場合、イベントの泡立ちとトラッピング処理に対応する状況を合理的に利用できます.

JAVAでexeclテーブルの複数行のデータをコピーして既存のページに貼り付けることができます(jsコントロール).