引用
一个简单的表格，可以根据输入的行列值来动态绘制表格，表格中的阿拉伯数字是我设定的一个t自增得到的，也可以自己修改代码，得到自己想要显示的内容。本人是刚入门的菜鸟级，正在学习jQuery，希望和大家多多交流，共同学习，共同进步。^_^
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My table</title>
<style type="text/css">
table tr{
height:20px;
background-color: red;
}
table tr td{
width:50px;
border-color: black;
}
</style>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script type="text/javascript">
$(function(){
$("#line").keydown(function(event){
if(event.keyCode==13){
$('#result').empty();
var line=$("#line").val();
var column=$("#column").val();
$('#result').append(apTable(line, column));
}
})
function apTable(l, c){
var arr = [];
var t=1;
arr.pus('<table border="1px" bordercolor="black">');
for(var i=0; i<l; i++){
arr.push('<tr>');
for(var j=0; j<c; j++){
arr.push('<td>');
arr.push(t);
arr.push('</td>');
t++;
}
arr.push('</tr>');
}
arr.push('</table>');
return arr.join('');
}
$("#column").keydown(function(event){
if(event.keyCode==13){
$("#result").empty();
var line=$("#line").val();
var column=$("#column").val();
$("#result").append(apTable(line,column));
}
})
})
</script>
</head>
<body>
<input class="text" id="line" />行
<input class="text" id="column"/>列
<div id="result"></div>
</html>
分享到：
相关推荐
在本教程中，我们将深入探讨如何使用jQuery实现表格的隔行换色效果，这是一项常见的网页美化技术，可以使用户在浏览数据时有更好的视觉体验。jQuery作为一个强大的JavaScript库，提供了丰富的功能来简化DOM操作，让...
2. jqGrid：jqGrid是一个功能丰富的表格插件，它也包含了分页功能，允许用户自定义分页按钮和样式，支持动态加载数据。 3. bootstrap-table：基于Bootstrap框架的表格插件，具有分页、排序、过滤、固定列、导出数据...
在网页开发中，数据展示是不...通过以上步骤，你就可以使用jQuery和Java实现一个基本的表格动态分页功能。但需要注意，实际项目中可能还需要考虑错误处理、性能优化、安全问题等多个方面，确保系统的稳定性和用户体验。
在本实例中，"jquery基础实例002——可编辑的表格"主要展示了如何使用jQuery库来实现一个基本的交互式、可编辑的表格功能。jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...
在本文中，我们将深入探讨如何使用jQuery来创建一个支持无限层级的多级菜单。这个话题对于Web开发人员，特别是初学者来说，是非常实用且有趣的，因为它可以帮助他们更好地理解和掌握前端交互设计。 首先，jQuery是...
本文将深入探讨“jquery入门之双色表格”，教你如何利用jQuery实现一个鼠标悬停时背景颜色变化的双色表格效果。 首先，我们需要理解HTML结构。在`sstable.html`文件中，通常会包含一个表格元素`<table>`，里面包含...
本文将深入探讨如何使用jQuery操作表格，基于给出的资源，我们可以看到一个与表格相关的示例。 首先，"tb-bg.gif"可能是一个表格背景图像，用于美化表格的视觉效果。在网页设计中，背景图片可以提升表格的整体风格...
本主题聚焦于jQuery中的一个实用特性——表格列宽的拖动调整，这是一个提高用户体验的功能，允许用户根据需要自定义表格列的宽度。下面我们将深入探讨这个功能的实现原理和相关知识点。 首先，要实现jQuery表格列宽...
本资源"jQuery表格导出转为excel表格插件.zip"显然是一个提供功能，允许用户将jQuery表格数据导出为Excel格式的插件。这种功能在数据管理、报告生成和数据分析等场景下非常有用。 首先，我们来了解一下jQuery库的...
《jQuery表格增删改查详解——基于Bootstrap框架》 在Web开发中，表格的数据操作是常见且重要的功能，包括添加、删除、修改和...对于初学者来说，这是一个很好的起点，能够快速入门并逐步熟悉Web开发的流程和技术。
在实际应用中，结合这些文件，你可以学习如何用 jQuery 实现对表格的增删改查和交互功能。 总之，jQuery 使得在网页中操作表格变得简单且高效。通过掌握基本的 jQuery 方法和事件处理，你能够创建出功能强大、交互...
总结来说，"jQuery从入门到精通"不仅涉及基本的DOM操作、事件处理和动画制作，还包括AJAX交互、插件应用以及使用jQuery EasyUI构建用户界面等多个方面。通过学习这些内容，你将能够利用jQuery高效地开发出功能丰富、...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互。本教程将深入探讨如何使用jQuery实现动态更改table表格数据，让你的网页表格具有实时编辑功能，提升用户体验。 ...
### jQuery 实现表格排序 #### 知识点一：jQuery表格排序插件介绍 在Web开发中，数据展示经常需要通过...通过这些知识点的学习，开发者可以在自己的项目中轻松地实现高效、美观的表格排序功能，提升用户的交互体验。
本书《JQuery菜鸟到忍者》主要面向希望从...综上所述，本书《JQuery菜鸟到忍者》为jQuery学习者提供了一个全面的学习路径，涵盖了从基本操作到高级应用的多个方面，是提升jQuery技能、解决实际开发问题的实用指南。
`jQuery`作为一个广泛使用的JavaScript库，提供了丰富的功能和便利的方法来实现这种效果。本教程将深入探讨如何利用`jQuery`来创建一个表头固定、内容区域可滚动的表格。 首先，我们需要在HTML中构建基本的表格结构...
总之，通过使用jQuery表格插件和适当的配置，我们可以轻松实现仿Excel的表格排序功能，提升用户体验。无论是简单的升序或降序排序，还是复杂的多列排序和自定义排序逻辑，都可以在Web环境中得到实现。结合实际项目中...
在"一天搞定jQuery(一)——使用jQuery完成定时弹出广告"的主题中，我们将深入探讨如何利用jQuery来实现一个定时弹出的广告功能。 首先，我们需要了解jQuery的核心概念。jQuery通过选择器（Selectors）获取DOM元素，...
通过jQuery技术，把页面上的表格导出Excel，导出时解决纯数据导出后显示科学计数法和日期型导出后为#号显示问题