data = [{"username":"张三","age":"25"},{"username":"李四","age":"30"}]
function show(){
var data = ajax.responseText;//返回数据---JSON格式字符串
data = data.replace(/^\s*/, "").replace(/\s*$/, "");//取出返回数据里面多余的空值
data = eval('('+data+')'); //将JSON格式字符串转换为JSON对象
var tab = document.getElementById("table_id");//获取页面的table
for(var i=0;i<data.length;i++){
var newLine = tab.insertRow();//添加一行
var newCell1 = newLine.insertCell();
var newCell2 = newLine.insertCell();
newCell1.innerHTML=data[i].username;
newCell2.innerHTML=data[i].age;
}
}
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="GENERATOR"
content="Rational® Application Developer™ for WebSphere® Software">
<script type="text/javascript">
var currentActiveRow;
function changeActiveRow(obj)
{
if(currentActiveRow) currentActiveRow.style.backgroundColor="";
currentActiveRow=obj;
currentActiveRow.style.backgroundColor="gray";
document.getElementById("roleName").value=currentActiveRow.cells[0].innerText;
document.getElementById("roleType").value=currentActiveRow.cells[1].innerText;
}
</script>
</head>
<body>
<table border="1" id="mytable">
<tbody>
<tr>
<td width="332">roleName</td>
<td width="156">roleType</td>
</tr>
<tr onclick="changeActiveRow(this)">
<td width="332">name1</td>
<td width="156">type1</td>
</tr>
<tr onclick="changeActiveRow(this)">
<td width="332">name2</td>
<td width="156">type2</td>
</tr>
</tbody>
</table>
<hr>
roleName:
<input type="text" id="roleName">
<br>
roleType:
<input type="text" id="roleType">
<br>
</body>
</html>
分享到：
相关推荐
在探讨“javascript表格操作”的知识点时，我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素，包括但不限于创建、删除行或单元格，以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...
为了提供更好的用户体验，可以采用JavaScript（js）来实现表格的无缝滚动效果，让表格像一个无边界的容器一样平滑滚动。这种效果在大数据量的展示或者长表格中尤其有用，它能让用户更容易地浏览和查找信息。 首先，...
通过以上步骤，你可以实现一个基本的基于DOM的JavaScript表格数据操作系统。这个系统可以适应各种数据管理需求，为用户提供直观的界面和流畅的操作体验。在实际项目中，可能还需要处理更复杂的交互逻辑，如表单验证...
总的来说，"html+css+js表格动态增删改与xml加载与保存"这个项目涵盖了网页开发中的基本技能，包括动态HTML操作、CSS美化、JavaScript事件处理和XML数据交互。掌握这些技术，能够帮助开发者构建具有强大功能和良好...
在网页开发中，JavaScript是一种非常...通过查看和学习这些文件，你可以更深入地理解动态JavaScript表格的实现方法。实践这些示例，将有助于提升你对JavaScript和DOM操作的理解，从而在未来的网页开发项目中游刃有余。
在网页开发中，表格是一种常见的数据展示和交互元素，而JavaScript（JS）表格组件则为开发者提供了强大的工具，用于创建功能丰富的动态表格。这些组件通常包括但不限于排序、过滤、分页、编辑、列自定义等功能，大大...
**Blue Table：JavaScript表格排序插件** 在网页开发中，数据展示经常需要用到表格，而对表格数据进行排序是用户交互中的常见需求。Blue Table是一款基于JavaScript的表格排序插件，它能够帮助开发者轻松实现表格...
首先，让我们了解一下JavaScript（JS）在前端表格中的作用。JS是Web开发中不可或缺的脚本语言，它允许我们动态地更新页面内容，包括表格。在处理大量数据时，传统的HTML表格可能会遇到性能瓶颈，因为它们一次性加载...
鼠标移动表格行上行变色的JS脚本,鼠标移动表格行上行变色的JS脚本,
JavaScript表格排序大全是一个涵盖多种JS表格排序实现方法的资源集合，旨在帮助开发者快速实现动态、交互式的表格数据排序功能。在网页开发中，表格是一种常用的数据展示方式，而JavaScript能够为表格提供强大的交互...
在实际应用中，JavaScript表格排序通常涉及到以下步骤： 1. **获取表格数据**：通过DOM操作获取表格的行（tr）和单元格（td），将其转换为数组或其他数据结构。 2. **定义排序规则**：确定根据哪一列进行排序，以及...
1.本控件设计封装了一个纯javascript表格显示js类控件，可以直接接口mysql数据库结果集查询，调用只需一行语句。控件具有自定义显示颜色、自定义显示宽高、类似excel上下左右滚动翻页、按字段排序、选择、修改、添加...
【标题】"js表格列拖动排序代码.zip"是一个压缩包，其中包含了实现JavaScript（JS）表格列拖动排序功能的代码。这个功能允许用户通过鼠标长按表格的列头来自由地拖动和排序列，实现列之间的互换，同时提供升序或降序...
JavaScript表格技术在网页开发中扮演着重要角色，尤其是在数据展示和操作方面。标题"javascript 表格列可以拖"指的是JavaScript实现的一种功能，允许用户通过拖动来调整表格列的宽度，以适应不同数据量和用户偏好。...
可编辑的 HTML JavaScript 表格控件 DataGrid
我们可以使用JavaScript遍历表格的所有行，通过检查行的索引来决定是否添加背景色。例如，对于奇数行，我们可以设置一种颜色，对于偶数行设置另一种颜色。以下是一个简单的实现示例： ```javascript var rows = ...
本资源"jQuery基于Bootstrap.js表格行展开收缩隐藏代码.zip"正是利用了这些特性，为表格数据的展示提供了更丰富的交互体验。 首先，我们来详细解释这个功能的工作原理。在网页中的表格，尤其是包含大量信息的表格，...
JavaScript表格复制，js复制表格，JavaScript，js，表格，复制，表格复制
js 表格编辑 插入行 删除行 编辑数据 将表格内容生产json格式