这篇文章介绍了js手动给表增加数据的实例代码
有需要的朋友可以参考一下
先建一个页面如下这里有两个表上面一个有数据下面一个没有数据只有一个表头！
复制代码 代码如下:
<body>
<form id="form
" runat="server">
<div>
<table border=
px
width="
px" id="tables">
<tr>
<td>
</td><td><input type="text" value="
" style="width:
px" /><input type="text" value="
"style="width:
px" /></td><td>我是中国人</td><td>好好学习< /td><td><input type="button" id="but" value="新增" onclick="butd(this);" /></td>
</tr>
<tr>
<td>
</td><td><input type="text" value="
"style="width:
px" /><input type="text" value="
"style="width:
px" /></td><td>我是中国人</td><td>好好学习< /td><td><input type="button" id="Button
" value="新增" onclick="butd(this);" /></td>
</tr>
<tr>
<td>
</td><td><input type="text" value="
" style="width:
px" /><input type="text" value="
" style="width:
px"/></td><td>我是中国人</td><td>好好 学习</td><td><input type="button" id="Button
" value="新增" onclick="butd(this);" /></td>
</tr>
<tr>
<td>
</td><td><input type="text" value="
" style="width:
px" /><input type="text" value="
"style="width:
px" /></td><td>我是中国人</td><td>好好学习< /td><td><input type="button" id="Button
" value="新增" onclick="butd(this);" /></td>
</tr>
<tr>
<td>
</td><td><input type="text" value="
" style="width:
px" /><input type="text" value="
"style="width:
px" /></td><td>我是中国人</td><td>好好学习< /td><td><input type="button" id="Button
" value="新增" onclick="butd(this);" /></td>
</tr>
</table>
</div>
<div>
<table border=
px
width="
px" id="table
">
<tr><td>ID</td><td>年龄</td><td>金钱</td><td>名字</td></tr>
</table>
</div>
</form>
</body>
现在点击新增按钮把点中的当前行的数据动态的加到下面的TABLE中javascipt代码如下
复制代码 代码如下:
<script type="text/javascript">
function butd(rows) {
var rows = rows
parentNode
parentNode
rowIndex //找到当前选中的行
var mytable = document
getElementById(
tables
); //找到当前这个 table;
var Romm_price = mytable
rows[rows]
cells[
]
innerText; //找到当前行的第一列的值
var room_rows = mytable
rows[rows]
cells[
]
children[
]
value; //找到当前行的第二列第一个文本框的值;
var room_rows
= mytable
rows[rows]
cells[
]
children[
]
value; //找到当前行的第二列第二个文本框的值;
var room_rows
= mytable
rows[rows]
cells[
]
innerText; //找到当前行的第三列的值;
//找到table
并给table
新增一行
var x = document
getElementById(
table
)
insertRow();
x
align = "center"; //设置行样式
var Romm_typename = x
insertCell(
);
var txtDate = x
insertCell(
);
var Guest_Type_ID = x
insertCell(
);
var room_row = x
insertCell(
);
Romm_typename
innerHTML = Romm_price;
txtDate
innerHTML = room_rows;
Guest_Type_ID
innerHTML = room_rows
;
room_row
innerHTML = room_rows
;
}
</script>
这个里面最重要的就是如何得到当前你点击是哪行然后是如何手动的把当前行的数据加到table中！
