点击每一行的某个单元格，获取这一行的数据。

先看一下业务。

标题

 上面是业务，点击右边的编辑。在模态框中显示本行的一些信息

 接下来看代码

<table class="table table-striped table-bordered table-hover"
		id="dataTables-example">
	<thead>
			<tr>
			<th class="text-center">编号</th>
			<th class="text-center">工号</th>
			<th class="text-center">姓名</th>
			<th class="text-center">昵称</th>
			<th class="text-center">性别</th>
			<th class="text-center">系部</th>
			<th class="text-center">状态</th>
			<th class="text-center">密码</th>
			<th></th>
			</tr>
	</thead>
	<tbody id="asds">
<c:forEach items="${teacherList }" var="teacher" 
			varStatus="status">
	<tr>
	<td class="text- center">
${requestScope.offset+status.index}</td>
	<td class="text-center">${teacher.employeeNum }</td>
	<td class="text-center">${teacher.teacherName }</td>
	<td class="text-center">${teacher.teacherNickName }</td>
	<td class="text-center">${teacher.teacherGender }</td>
	<td class="text-center">${teacher.teacherCategory }</td>
	<td class="text-center">${teacher.status }</td>
	<td class="text-center"><a href=""class="waves-effect waves-dark" style="font-size: 20px">
		<button type="button" class="btn btn-default btn-lg"
			style="padding-top: 4%;">
	<small>重置</small>
		</button>
	</a></td>
	<td class="text-center">
	<button id="edit" type="button" class="btn btn-default btn-lg"
		data-toggle="modal" data-target="#Edit" id="${teacher.employeeNum }"
			style="padding-top: 2%;" onclick="getRowValue(this)">
		<small>编辑</small>
	</button>
	</td>
</tr>
</c:forEach>
</tbody>
</table>

上面是普通的循环遍历后台代码

接下来看模态框(bootstap)

<form>
							<div class="form-group">
								<label for="teacherId" class="control-label">教师工号</label> <input
									type="text" class="form-control" id="teacherId">
							</div>
							<div class="form-group">
								<label for="teacherName" class="control-label">教师姓名</label>
								<input type="text" class="form-control" id="teacherName">
							</div>
							<div class="form-group">
								<label class="control-label">教师性别</label> <select
									class="form-control" id="select">
									<option>男</option>
									<option>女</option>
								</select>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal" style="margin-left: 2%">关闭</button>
								<button type="submit" class="btn btn-primary">提交</button>
							</div>
						</form>

------------------------------------------------------------------ 重要代码----------------------------------------

<script type="text/javascript">
function getRowValue(element){
	//this做为参数传过来是方法中的element,parentNode就是获取父节点，获取了连个父节点，就相当于获取了tr
	var node = element.parentNode.parentNode;
	//给每一个input框赋值，node.children[0].innerHTML,node就是tr，tr的子类有多个【0】根据下标取值
	document.getElementById("teacherId").value=node.children[1].innerHTML;
	document.getElementById("teacherName").value=node.children[2].innerHTML;
	if (node.children[4].innerHTML=="男")
	  {
		document.getElementById('select').options[0].selected = true;
	  }
	else{
		document.getElementById('select').options[1].selected = true;
	}
	}
</script>

OK，上面就是js部分代码。看一遍基本就懂了。 

重要的就是 onclick(this)   和js 部分代码。

这是我n年前的代码，已经不具有参考性，目前有许多前端框架能够实现此功能。例如：

element的@row-click:""，能够实现此功能。