我的第一个博客
菜鸟一只,大神勿喷 。。。。
试一下用js写的表单提交
<html><head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input::-webkit-input-placeholder{
position:relative;
}
#text {
height:10px;
vertical-align:middle;
line-height:10px; /*line-height must be equal to height*/
}
table{width: 500px;border: 1px solid;}
table tr{border: 1px dotted;}
table tr td{border: 1px dotted;text-align: center;height: 20px;}
text
</style>
<script type="text/javascript">
var i = 2;
window.onload = function(){
var insertBut = document.getElementById("insert");
var table = document.getElementById("table");
insertBut.onclick = function(){
//为表格创建新的行
var row = table.insertRow();
//为行创建新的列
var cell1 = row.insertCell();
//cell1.innerHTML = i++;
//将序号插入到列的内部的后面
var seq = document.createTextNode(i++);
cell1.appendChild(seq);
var cell2 = row.insertCell();
cell2.innerHTML = "<input type='text' size='8'/>"
var cell3 = row.insertCell();
cell3.innerHTML = "<input type='text' size='8'/>"
var cell4 = row.insertCell();
cell4.innerHTML = "<input type='text' size='8'/>"
var cell5 = row.insertCell();
cell5.innerHTML = "<input type='text' size='8'/>"
var cell6 = row.insertCell();
/* var deleteBut = document.createElement("input");
deleteBut.setAttribute("type", "button");
deleteBut.setAttribute("value", "delete");
deleteBut.onclick = function(){
//删除此行
var td = this.parentNode;
var tr = td.parentNode;
table.deleteRow(tr.rowIndex);
//重排序号
restSeq();
}; */
//deleteBut.type = "button";
//deleteBut.value = "delete";
// cell6.appendChild(deleteBut);
cell6.innerHTML = "<input type=\"button\" value=\"delete\" onclick=\"delRow(this);\"/>";
};
var deleteLastBut = document.getElementById("deleteLast");
deleteLastBut.onclick = function(){
//删除最后一行
table.deleteRow();
i--;
};
};
function delRow(but){
var index = but.parentNode.parentNode.rowIndex;
var table = document.getElementById("table");
table.deleteRow(index);
i--;
//重排序号
restSeq();
}
/**
* 将表格的序号重置
*/
function restSeq(){
var table = document.getElementById("table");
//获得表格所有的行
var rows = table.rows;
for(var i = 1; i < rows.length; i++){
var row = rows[i];
//获得行所有的列
var cells = row.cells;
//获取第一列
var seqCell = cells[0];
seqCell.innerHTML = row.rowIndex;
}
}
</script>
</head>
<body>
<form action="form_action.jsp" method="get">
<table id="table">
<thead>
<tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>导师</th><th>删除</th></tr>
<tr><td>1</td>
<td><input type="text" name="fname" size="8" /></td>
<td><input type="text" name="fname" size="8" /></td>
<td><input type="text" name="fname" size="8" /></td>
<td><input type="text" name="fname" size="8" /></td>
<td><input type="button" value="delete" onclick="delRow(this);"></td></tr></thead>
<tbody>
</tbody>
</table>
<table>
<tbody><tr>
<td><input id="insert" type="button" value="insert"></td>
<td><input id="deleteLast" type="button" value="deleteLast"></td>
<td><input type="submit" value="全部提交" /></td>
</tr>
</tbody></table>
</form>
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99"
src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.js"
></script>
</body></html>