这是html文件。
的index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - Dynamic Table</title>
<link href="dynamictable_css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Data Table</h1>
<table id="data" class="data-table data-table-horizontal data-table-highlight">
<tbody>
<tr>
<td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><a type="button" value="Delete" onclick="deleteRow(this)"><i class="fa fa-trash-o fa-fw"></i></a></td>
</tr>
</table>
<div class="pull-right">
<input type="button" value="Add" class="top-buffer" onclick="addRow('data')" />
</div>
</div>
<script src="dynamictable_js/index.js"></script>
</body>
</html>
这是javascript。
index.js:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newRow = row.insertCell(i);
newRow.innerHTML = table.rows[0].cells[i].innerHTML;
newRow.childNodes[0].value = "";
}
}
function deleteRow(row) {
var table = document.getElementById("data");
var rowCount = table.rows.length;
if (rowCount > 1) {
var rowIndex = row.parentNode.parentNode.rowIndex;
document.getElementById("data").deleteRow(rowIndex);
}
else {
alert("Please specify at least one value.");
}
}
这是css。
的style.css:
h1 {
font-family: Arial;
font-size: 20px;
color: #666;
}
.data-table {
border: solid 1px #eee;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
width: 100%;
}
.data-table tbody td {
border: solid 1px #eee;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.data-table-highlight tbody tr:hover {
background-color: #f8f8f8;
}
.data-table-horizontal tbody td {
border-left: none;
border-right: none;
}
.top-buffer {
margin-top: 20px;
}
.pull-right {
float: right;
}
#main {
width: 60%;
margin: 5%;
}
我的论文来自菲律宾布拉干州立大学。 我是第四年IT学生想要通过我的论文。
抱歉我的英文不好..