zoukankan html css js c++ java

table动态添加删除一行和改变标题

<style type="text/css">
body{
    font-size:13px;
    line-height:25px;
    }
table{
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    300px;
}
td{
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    }
.center{
    text-align:center;
}
.title{
    text-align:center;
    font-weight:bold;
    background-color: #cccccc;
}
#displayInfo{
    color:red;
}
      
</style>
<script src="js/table.js"></script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
  <tr id="row1">
    <td>书名</td>
    <td>价格</td>
  </tr>
  <tr id="row2">
    <td>看得见风景的房间</td>
    <td class="center">&yen;30.00</td>
  </tr>
  <tr id="row3">
    <td>60个瞬间</td>
    <td class="center">&yen;32.00</td>
  </tr>
</table>
<input name="b1" type="button" value="增加一行" onclick="addRow()" />
<input name="b2" type="button" value="删除第2行"  onclick="delRow()"/>
<input name="b3" type="button" value="修改标题"  onclick="updateRow()"/>
<div id="displayInfo"></div>
</body>

function addRow(){    
    var tableObj=document.getElementById("myTable");
    var rowNums=tableObj.rows.length;
    var newRow=tableObj.insertRow(rowNums);
    var col1=newRow.insertCell(0);
    col1.innerHTML="幸福从天而降";
    var col2=newRow.insertCell(1);
    col2.innerHTML="&yen;18.5";
    col2.align="center";
    var divInfo=document.getElementById("displayInfo");
    divInfo.innerHTML="添加商品成功！"
}
    
function updateRow(){
    var uRow=document.getElementById("myTable").rows[0];
    uRow.className="title";
}

function delRow(){
   document.getElementById("myTable").deleteRow(1);
   var divInfo=document.getElementById("displayInfo");
   divInfo.innerHTML="删除商品成功！" 
}

查看全文

相关阅读:
Kotlin扩展深入解析及注意事项和可见性
 Kotlin属性揭秘与延迟初始化特性
 Kotlin伴生对象及其字节码内幕详解
 Kotlin继承与重写重要特性剖析
 Kotlin构造方法详解与初始化过程分析
 Range与面向对象的Kotlin
Kotlin编译器优化与when关键字详解
 Kotlin基础特性深入讲解
 java读取mysql表的注释及字段注释
 mysql导入导出sql文件

原文地址：https://www.cnblogs.com/914556495wxkj/p/3426594.html