使用jqury在指定表格列与行输出指定内容

来源:互联网 发布:java线程sleep函数 编辑:程序博客网 时间:2024/04/30 13:26

---css样式

<style type="text/css">
td{width:50px;height:15px;font-size: 14px;}
</style>

----html代码

<body>
<table rules='all' border="1" style="margin:auto;">
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
<center>
<div>
<p>
行数:<input type="text" placeholder="输入行数"/>
</p>
<p>
列数<input type="text" placeholder="输入列数"  />
</p>
<p>
内容:<input type="text" placeholder="输入内容" />
</p>
<p>
<button class="btn" id="btn">提交</button>
</p>
</div>
</center>

</body>

----jquery代码

<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
window.onload=function(){
$("#btn")[0].onclick=function(){
//获取输入的数值
var  row=$('input:first').val()-1;
var  cols=$('input:eq(1)').val()-1;
var content=$('input:eq(2)').val();
console.log(cols);
//指定单元格
var td="tr:eq("+row+")>td:eq("+cols+")";
//输出内容
$(td).html(content);
}
}
</script>


0 0
原创粉丝点击