zoukankan      html  css  js  c++  java
  • js动态添加删除行,兼容ie和火狐

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    var bCount=1;
    var xCount=1;
    function addBao(){
    var newRow=baoyang.insertRow(baoyang.rows.length);
    newRow.id="trb";
    newRow.ln=bCount;

    var Input1=newRow.insertCell(0);
    Input1.ln=bCount;
    Input1.innerHTML='<input id="typeId" type="text" name="typeId" style="40" value="'+bCount+'">';

    var Input2=newRow.insertCell(1);
    Input2.ln=bCount;
    Input2.innerHTML='<input type="text" id="dictCode" name="dictCode" style="80">';

    var Input3=newRow.insertCell(2);
    Input3.ln=bCount;
    Input3.innerHTML='<input type="text" id="dictName" name="dictName" style="80">';

    var Input3=newRow.insertCell(3);
    Input3.ln=bCount;
    Input3.innerHTML='<input type="text" id="remark" name="remark" style="80">';

    var Del=newRow.insertCell(4);
    Del.ln=bCount;
    Del.onclick=delBao;
    Del.innerHTML='<input type="button" name="Button" style="40" value=" 删除 " ln='+bCount+'>';

    bCount++;
    }

    function delBao(event){
    var event = event? event: window.event
    var img = event.srcElement ? event.srcElement:event.target;
    var trb = document.getElementById("baoyang");
    var rows = trb.rows;
    var trbline=parseInt(img.parentElement.ln,10);
    if (trbline>0) {
    for (var i=1;i<rows.length;i++){
    if (rows[i].ln==trbline){
    baoyang.deleteRow(i);
    }
    }
    }
    }

    function addXin(){
    var newRow=xintian.insertRow(xintian.rows.length);
    newRow.id="trx";
    newRow.ln=xCount;

    var Input1=newRow.insertCell(0);
    Input1.ln=xCount;
    Input1.innerHTML='<input type="text" id="dataId" name="dataId" style="40" value="'+xCount+'">';

    var Input2=newRow.insertCell(1);
    Input2.ln=xCount;
    Input2.innerHTML='<input type="text" id="dicDataName" name="dicDataName" style="90">';

    var Input3=newRow.insertCell(2);
    Input3.ln=xCount;
    Input3.innerHTML='<select id="dicType" name="dicType" > <option value="" selected="selected">[请选择标识]</option></select>';

    Del=newRow.insertCell(3);
    Del.ln=xCount;
    Del.onclick=delXin;
    Del.innerHTML='<input type="button" name="Button" style="40" value=" 删除 " ln='+xCount+'>';

    xCount++;
    }
    function delXin(event){
    var event = event? event: window.event
    var img = event.srcElement ? event.srcElement:event.target;
    var trx = document.getElementById("xintian");
    var rows = trx.rows;
    var trline=parseInt(img.parentElement.ln,10);
    if (trline>0) {
    for (var i=1;i<rows.length;i++){
    if (rows[i].ln==trline){
    xintian.deleteRow(i);
    }
    }
    }
    }
    </script>

    </head>

    <body>
    <table width="707" cellspacing="0" cellpadding="0" border="0" class="uniformstyle" id="myform">
    <tbody>
    <tr>
    <td valign="top">
    <table class="myformstyle" id="baoyang">
    <tr id="trb">
    <td style="40">序号</td>
    <td style="80">标识编码</td>
    <td style="80">标识分类名称</td>
    <td style="80">备注</td>
    <td style="50"><input type="button" value="添加" onclick="addBao()" style="40"></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td valign="top">
    <table class="myformstyle" id="xintian">
    <tr id="trx">
    <td style="40">序号</td>
    <td style="90">名称</td>
    <td style="40">标识分类</td>
    <td style="40"><input type="button" value="添加" onclick="addXin()" style="40"></td>
    </tr>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

    -----来源http://blog.csdn.net/maypol/article/details/5372744

  • 相关阅读:
    python面向对象三大特性之一封装
    python面向对象的三大特性之一多态
    python之子类调用父类的两种方式
    python之接口继承
    python之组合与继承的使用场景
    Learning to Rank Short Text Pairs with Convolutional Deep Neural Networks(paper)
    lesson9-小象学院cv
    tips
    C5-fasterrcnn-小象cv-code
    C4-ResNet-TF-小象cv-code
  • 原文地址:https://www.cnblogs.com/lanliying/p/3935177.html
Copyright © 2011-2022 走看看