效果
數據獲取
代碼 (需引入jQuery.js)
<!DOCTYPE html>
<html>
<head>
<title>tableDemo</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<style type="text/css">
html{
font-size: 62.5%;
}
table{
margin-left: auto;
margin-right: auto;
}
td{
width: 100px;
height: 50px;
}
input{
padding: .625em;
font-size: 1.6rem;
line-height: 1.2;
color: #555;
vertical-align: middle;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 0;
-webkit-appearance: none;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.am-btn{
display: inline-block;
margin-bottom: 0;
padding: .625em 1em;
vertical-align: middle;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.2;
text-align: center;
white-space: nowrap;
background-image: none;
border: 1px solid transparent;
border-radius: 0;
cursor: pointer;
outline: 0;
-webkit-appearance: none;
}
.am-btn-secondary {
color: #fff;
background-color: #3bb4f2;
border-color: #3bb4f2;
}
.am-btn-danger {
color: #fff;
background-color: #dd514c;
border-color: #dd514c;
}
.am-btn-success {
color: #fff;
background-color: #5eb95e;
border-color: #5eb95e;
}
input[name="name"]{
border-color: #0e90d2;
}
input[name="phone"]{
border-color: #3bb4f2;
}
input[name="num"]{
border-color: #5eb95e;
}
.btn-box{
text-align: center;
}
.btn-ml{
margin-left: 5rem;
}
</style>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>手機號</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr class="tr0">
<td><input type="text" name="name"></td>
<td><input type="text" name="phone"></td>
<td><input type="text" name="num"></td>
<td><button class="am-btn am-btn-danger" onclick="dele(0)">刪除</button></td>
</tr>
</tbody>
</table>
</div>
<div class="btn-box">
<button class="am-btn am-btn-secondary" onclick="addTr()">增加</button>
<button class="am-btn am-btn-success btn-ml" onclick="showText()">數據</button>
</div>
</body>
<script type="text/javascript">
var a=1;
function showText(){
var c=$('tbody>tr').length;
var arr=new Array();
for(var i=1;i<=c;i++){
var name = $('tbody>tr:nth-of-type('+i+')>td:nth-of-type(1)>input[name="name"]').val();
var phone = $('tbody>tr:nth-of-type('+i+')>td:nth-of-type(2)>input[name="phone"]').val();
var amount = $('tbody>tr:nth-of-type('+i+')>td:nth-of-type(3)>input[name="num"]').val();
arr.push(name+","+phone+","+amount);
}
console.log(arr);
}
function addTr(){
var apStr='<tr class="tr'+a+'"><td><input type="text" name="name"></td><td><input type="text" name="phone"></td><td><input type="text" name="num"></td><td><button class="am-btn am-btn-danger" onclick="dele('+a+')">刪除</button></td></tr>';
$('table').append(apStr);
a++;
}
function dele(con){
$('.tr'+con).remove();
}
</script>
</html>