2014年8月20日 星期三

JavaScript 修改、移除td

有空再整理
HTML:
<tr>
    <td><input style="display:none" id="1_fields1" type="text" value="" size="12" /><span id="1_mySapns1">RulesName1</span></td>
    <td><input style="display:none" id="1_fields2" type="text" value="" size="10" /><span id="1_mySapns2">59.118.67.104</span></td>
    <td><input style="display:none" id="1_fields3" type="text" value="" size="10" /><span id="1_mySapns3">120.58.164.22</span></td>
    <td><input style="display:none" id="1_fields4" type="text" value="" size="10" /><span id="1_mySapns4">XP_REG, UNION SELECT, ‘;DROR</span></td>
    <td><input style="display:none" id="1_fields5" type="text" value="" size="10" /><span id="1_mySapns5">SYSTEM21, CMD.EXE</span></td>
    <td><input style="display:none" id="1_fields6" type="text" value="" size="10" /><span id="1_mySapns6">GET, POST, HEAD, COPY, POLL</span></td>
    <td><input style="display:none" id="1_fields7" type="text" value="" size="10" /><span id="1_mySapns7">Directory Traversal Exploits in URL, Directory Traversal Exploits in Query</span></td>
    <td><input style="display:none" id="1_fields8" type="text" value="" size="10" /><span id="1_mySapns8">Encoding Abuse Exploits in URL, Encoding Abuse Exploits in Query String, Encoding Abuse Exploits in Post Data</span></td>
    <td><input style="display:none" id="1_fields9" type="text" value="" size="10" /><span id="1_mySapns9">Maximum URL Length Allowed</span></td>
    <td><input style="display:none" id="1_fields10" type="text" value="" size="10" /><span id="1_mySapns10">High Bit Shellcode Protection in Post Data, High Bit Shellcode Protection in Header</span></td>
    <td style="text-align:center">
        <span id="1_ModifySpan1" style="display:block"><input type="button" value="修改" onClick="modify('1_ModifySpan', '1_fields', '1_mySapns');"></span>
        <span id="1_ModifySpan2" style="display:none"><input type="button" value="確認" onClick="modify('1_ModifySpan', '1_fields', '1_mySapns');"></span>
    </td>
    <td style="text-align:center"><input type="button" value="刪除" onClick="deleteRow(1);"></td>
</tr>
JavaScript:
<script>
var rowsTotal = 0;
function modify(id, inputsID, spansID){
    //取得btn ID
    var btn1 = document.getElementById(id + '1');
    var btn2 = document.getElementById(id + '2');


    if(btn1.style.display == 'block'){
        btn1.style.display = 'none';
        btn2.style.display = 'block';

        for(var i=1 ; i<11 ; i++){
            var spans = document.getElementById(spansID + i);
            var fields = document.getElementById(inputsID + i);
            var strInner = document.getElementById(spansID + i).innerHTML;
            spans.innerHTML = '';
            fields.value = strInner;
            fields.style.display = 'block';
        } 
    }else{
        btn1.style.display = 'block';
        btn2.style.display = 'none'; 

        for(var i=1 ; i<11 ; i++){
            var spans = document.getElementById(spansID + i);
            var fields = document.getElementById(inputsID + i);
            var strInner = fields.value;
            spans.innerHTML = strInner;
            fields.value = '';
            fields.style.display = 'none'; 
        }
    }
} //function end

function deleteRow(RowNum){
    //取得目前td數量
    var num = document.getElementById("myTable").rows.length;
    if(rowsTotal == 0)
     rowsTotal = num;
        var num2 = rowsTotal - num;
    if(RowNum - num2 == 0){
        document.getElementById("myTable").deleteRow((RowNum));
    }else{
        document.getElementById("myTable").deleteRow((RowNum - num2)); 
    }
}
</script>

沒有留言:

張貼留言