zoukankan      html  css  js  c++  java
  • select 标签级联 和 html增加/删除行

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>
    联动和增加行
    </title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
    function jl1(value){
    document.getElementById("ml2").options.length = 0;
    var selectObj = document.getElementById("ml2");
    selectObj.options[selectObj.length] = new Option("全部","");

    if(value=='1'){
    selectObj.options[selectObj.length] = new Option('v1','v1');
    selectObj.options[selectObj.length] = new Option('v2','v2');
    }
    if(value=='2'){
    selectObj.options[selectObj.length] = new Option('vv1','vv1');
    selectObj.options[selectObj.length] = new Option('vv2','vv2');
    }
    fz();

    }
    function fz(){
    var ml1 = $("#ml1").val();
    var ml2 = $("#ml2").val();
    var ml = (ml2==''||ml2==null)?ml=ml1:ml=ml2;
    $("#ml").val(ml);
    //alert($("#ml").val());
    }
    /**
    success:function(res){

    var result = res.split(";");
    var tep;

    document.getElementById("ml2").options.length = 0;
    var selectObj = document.getElementById("ml2");
    selectObj.options[selectObj.length] = new Option("全部","");

    if(result!=""&&result!=null){
    for (i = 0; i < result.length; i++) {
    tep = result[i]
    var tmparr = tep.split(",");
    selectObj.options[selectObj.length] = new Option(tmparr[1],tmparr[0]);
    }
    }
    changeValue();
    }
    */

    function addTr(){
    $("#tbody").append(createNewRow());
    sortNumber();
    }

    function createNewRow(){
    var index = $(".tr");
    var td = $("#tr1").html();
    var tr = "<tr id='tr"+index.length+"' class='tr'>"+td+"</tr>";
    return tr;
    }
    function sortNumber(){
    $(".xh").each(function(index,obj){
    $(obj).html(index+1);
    $(obj).parents('tr').attr("id","tr"+(index+1));
    });
    }
    function delTr(obj){
    var tr = $(".tr").length;
    if(tr==1){
    alert("必须保留一行");
    return;
    }
    $(obj).parents('tr').remove();
    sortNumber();
    }
    </script>
    </head>
    <body>
    <input id='ml' name='ml' type='hidden'/>
    <select onchange="jl1(this.value)" id='ml1'>
    <option value ="">全部</option>
    <option value ="1">1</option>
    <option value ="2">2</option>
    <option value ="3">3</option>
    </select>
    <select id='ml2' onchange='fz()'>
    <option value ="">全部</option>
    </select>
    <br><br>
    <br><br>
    <br><br>
    <input type='button' value='增加行' onclick='addTr()'>
    <table >
    <tbody id='tbody'>
    <tr>
    <td>序号</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>操作</td>
    </tr>
    <tr id='tr1' name='tr' class='tr'>
    <td class='xh'>1</td>
    <td>
    <input name='name'></input>
    </td>
    <td>
    <input name='age'></input>
    </td>
    <td>
    <input type='button' value='删除' onclick="delTr(this)"></input>
    </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

  • 相关阅读:
    MySQL 中 InnoDB 支持的四种事务隔离级别名称,以及逐 级之间的区别?
    NOW()和 CURRENT_DATE()有什么区别?
    什么是非标准字符串类型?
    列的字符串类型可以是什么?
    实践中如何优化 MySQL ?
    可以使用多少列创建索引?
    数据库中的事务是什么?
    锁的优化策略?
    SQL 注入漏洞产生的原因?如何防止?
    强调事项段、其他事项段、关键审计事项
  • 原文地址:https://www.cnblogs.com/BigWrite/p/9166346.html
Copyright © 2011-2022 走看看