zoukankan      html  css  js  c++  java
  • JS节点操作

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta content="text/html;charset=utf-8" http-equiv="content-type">
    <script>
    function computePrice(obj){
    obj.value=obj.value.replace(/D+/,"");
    //得到数量
    var num=parseFloat(obj.value);
    var pTdObj=obj.parentNode.previousSibling;//得到当前元素的父节点的上一个兄弟节点
    var nTdObj=obj.parentNode.nextSibling;//得到元素父节点的下一个兄弟节点
    if(isNaN(num)){
    num=1;
    }else{
    nTdObj.innerHTML=num * pTdObj.innerHTML;
    }
    }
    function del(obj){
    var trObj=obj.parentNode.parentNode;
    trObj.parentNode.removeChild(trObj);
    }

    window.onload=function(){
    var likes=document.getElementsByName("like");//获取所有name属性为like的元素集合

    var myspan=document.getElementById('myspan');//得到span元素对象
    alert(myspan.innerHTML);

    var txtNode=myspan.firstChild;//通过元素节点,firstChild,得到文本节点
    alert(txtNode.nodeValue+"we");//得到文本节点内容
    }


    </script>

    <script>
    var deptObj,employeeObj;
    window.onload=function(){
    deptObj=document.getElementById("deptSelect");
    employeeObj=document.getElementById("employeeSelect");

    //弹出选择框,返回boolean值
    // var value=confirm("是否删除");
    // alert(value);

    var value=prompt("请输入姓名");
    alert(value);
    }
    function changeDept(){
    //清空下拉框的选项,options为下拉框所有option元素集合
    employeeObj.options.length=0;

    if(deptObj.value==1){
    //创建option元素
    var newOption=document.createElement("option");
    newOption.innerHTML="张三";
    newOption.value=1;
    employeeObj.appendChild(newOption);
    }else if(deptObj.value==2){
    var newOption=document.createElement("option");
    newOption.innerHTML="李四";
    newOption.value=2;
    employeeObj.appendChild(newOption);
    }
    }
    function showSelected(){
    var schoolObj=document.getElementById('schoolSelect');
    var s='';
    for(var i=0;i<schoolObj.length;i++){
    if(schoolObj.options[i].selected==true){//判断选项是否被选中
    s+=schoolObj.options[i].value+"";
    }
    }
    alert(s);

    }
    </script>
    </head>
    <body>
    <table>
    <tr><td>商品名</td><td>单价</td><td>数量</td><td>总价</td><td>操作</td></tr>
    <tr><td>呆毛</td><td>1.5</td><td><input type="text" value="1" onkeyup="computePrice(this)"></td><td>1.5</td><td><a href="javascript:void(0)" onclick="del(this)">删除</a></td></tr>
    <tr><td>猪儿虫</td><td>2</td><td><input type="text" value="1" onkeyup="computePrice(this)"></td><td>2</td></tr>
    <tr><td>熊掌</td><td>4</td><td><input type="text" value="1" onkeyup="computePrice(this)"></td><td>4</td></tr>
    </table>
    <form>
    爱好:<input type="checkbox" name="like" value="体育">体育
    爱好:<input type="checkbox" name="like" value="音乐">音乐
    爱好:<input type="checkbox" name="like" value="美术">美术
    </form>
    <span id="myspan">----</span>

    <select id="deptSelect" onchange="changeDept()">
    <option value="-1">请选择</option>
    <option value="1">市场部</option>
    <option value="2">财务部</option>
    </select>

    <select id="employeeSelect"></select>
    <!--设置下拉框选项,不会触发onchange事件-->
    <input type="button" value="设置" onclick="deptObj.value=2"><br>

    <select multiple id="schoolSelect">
    <option value="成都1中">成都1中</option>
    <option value="成都2中">成都2中</option>
    <option value="成都3中">成都3中</option>
    <option value="成都4中">成都4中</option>
    </select>
    <input type="button" onclick="showSelected();"><br>
    <input type="button" onclick="window.open('Table.html','mywindow','width=200px,height=200px')" value="打开新窗口">

    <a href="Table.html">跳</a>
    </body>
    </html>

  • 相关阅读:
    Block代码块中使用局部变量注意点
    This application's application-identifier entitlement does not match that of the installed application. These values must match for an upgrade to be allowed.
    iOS实现渐变颜色
    linker command failed with exit code 1 (use -v to see invocation)
    关于SVN的405错误Server sent unexpected return value (405 Method Not Allowed)的解决办法
    提交SVN Working copy locked解决
    FSCalendar使用和注意事项
    c/c++左值和右值
    mysql使用笔记(一)
    解决 ssh 登录到ubuntu server 慢的问题
  • 原文地址:https://www.cnblogs.com/yanjialin/p/6423070.html
Copyright © 2011-2022 走看看