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

<style type="text/css">

body{

    font-size:13px;

    line-height:25px;

    }

table{

    border-top: 1px solid #;

    border-left: 1px solid #;

    width:300px;

}

td{

    border-right: 1px solid #;

    border-bottom: 1px solid #;

    }

.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="" cellspacing="" cellpadding="" 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();

    col1.innerHTML="幸福从天而降";

    var col2=newRow.insertCell();

    col2.innerHTML="&yen;18.5";

    col2.align="center";

    var divInfo=document.getElementById("displayInfo");

    divInfo.innerHTML="添加商品成功！"

}

function updateRow(){

    var uRow=document.getElementById("myTable").rows[];

    uRow.className="title";

}

function delRow(){

   document.getElementById("myTable").deleteRow();

   var divInfo=document.getElementById("displayInfo");

   divInfo.innerHTML="删除商品成功！"

}

秒客网

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

相关文章