有关Html的有关问题
日期：2014-05-17 浏览次数：20687 次
有关Html的问题
在一页面上有一个表格，该表格只有有一表头，下面是已输入框和一按钮。我想在点击按钮时表头下面会自动加一行表格，并把输入框的内容显示在那里。该怎么做啊，求高手指点。最好有相应代码！
------解决方案--------------------
<html>
<body>
<table border="1" id="tbId">
<tr>
<td>表头</td>
<tr>
</table>
<input type="text" name="info" id="info" /> <input type="button" value="添加" onclick="addText()" />
<script>
<!--
function addText(){
var tbid=document.getElementById("tbId");
var info=document.getElementById("info");
var infoText=info.value;
var tr=document.createElement("tr");
var td=document.createElement("td");
td.innerHTML=infoText;
tr.appendChild(td);
tbid.appendChild(tr);
info.value="";
}
-->
</script>
</body>
</html>
------解决方案--------------------
使用js实现。
<table id="selfAddTable" >
<th>编号</th><th>姓名</th><th>按钮</th>
<tr><td><input /></td><td><input /></td><td><button onclick="selfAdd();"/></td></tr>
</table>
<script language="java/text">
function selfAdd(){
var table = document.findElementById("selfAddTable");
var content = "<tr><td><input /></td><td><input /></td><td><input type='button' onclick='selfAdd();' /></td>";
table.append(content);
}
</script>
你试试~
------解决方案--------------------
在一页面上有一个表格，该表格只有有一表头，下面是已输入框和一按钮。我想在点击按钮时表头下面会自动加一行表格，并把输入框的内容显示在那里。该怎么做啊，求高手指点。最好有相应代码！
------解决方案--------------------
<html>
<body>
<table border="1" id="tbId">
<tr>
<td>表头</td>
<tr>
</table>
<input type="text" name="info" id="info" /> <input type="button" value="添加" onclick="addText()" />
<script>
<!--
function addText(){
var tbid=document.getElementById("tbId");
var info=document.getElementById("info");
var infoText=info.value;
var tr=document.createElement("tr");
var td=document.createElement("td");
td.innerHTML=infoText;
tr.appendChild(td);
tbid.appendChild(tr);
info.value="";
}
-->
</script>
</body>
</html>
------解决方案--------------------
使用js实现。
<table id="selfAddTable" >
<th>编号</th><th>姓名</th><th>按钮</th>
<tr><td><input /></td><td><input /></td><td><button onclick="selfAdd();"/></td></tr>
</table>
<script language="java/text">
function selfAdd(){
var table = document.findElementById("selfAddTable");
var content = "<tr><td><input /></td><td><input /></td><td><input type='button' onclick='selfAdd();' /></td>";
table.append(content);
}
</script>
你试试~
------解决方案--------------------
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
a{color:blue;}
</style>
<script>
function addRow(obj1,obj2){
var title = document.getElementById(obj1);
var content = document.getElementById(obj2);
var myTable=document.getElementById('myTable').insertRow(0)
var x=myTable.insertCell(0);
var y=myTable.insertCell(1)
var z=myTable.insertCell(2)
x.innerHTML=title.value;
y.innerHTML=content.value;
z.innerHTML="<a href=\"#\" onclick=\"deleteRow(this)\">删除</a>";
}
function deleteRow(obj){
var i = obj.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
}
</script>
</head>
<body>
<table id="myTable" style="border:1px solid blue;" cellspacing="3" cellpadding="3">
<tr>
<td><input type="text" id="title" /></td>
<td><input type="text" id="content"/></td>
<td><input type="button" value="保存" onclick="addRow('title','content')" /></td>
</tr>
</table>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
