【发布时间】：2015-03-04 07:11:00
【问题描述】：
使用该行的 id 编辑表的特定行，无需数据库操作。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link href="styleKMF.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://prototype.xsanisty.com/calx/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://prototype.xsanisty.com/calx/jquery-calx-1.1.8.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="addRow.js"></script>
<script type="text/javascript">
var currentRow = 1;
$(document).ready(function(){
$('#calx').calx();
//insert row
$('#irow').click(function(){
if($('#G1').val()){
$('#list tbody').append($("#list tbody tr:last").clone());
$('#list tbody tr:last td:first').html($('#G1').val());
$('#list tbody tr:last td:last').html($('#H1').val());
$('#list tbody tr:last td:last').html($('#I1').val());
$('#list tbody tr:last td:last').html($('#J1').val());
$('#list tbody tr:last td:last').html($('#E1').val());
}
});
//Edit a specific row based on id and update it
$("td", this).on("click", function () {
var tds = $(this).parents("tr").find("td");
$.each(tds, function (i, v) {
$($("#myForm input")[i]).val($(v).text());
});
});
});
</script>
</head>
<body>
<div id="container">
<div id="calx">
<div id="spacer"></div>
<form name="serviceForm" >
<label for="serviceName">Service Name:</label>
<select name="particulars" id="G1">
<%
try{
Connection connection = DBConnectionManager.getConnection();
CallableStatement callableStatement = connection.prepareCall("{ CALL get_master_services(?)}");
callableStatement.registerOutParameter(1, OracleTypes.CURSOR);
callableStatement.execute();
ResultSet rs = (ResultSet) callableStatement.getObject(1);
while(rs.next()){
String id1 = rs.getString("service_desc");
%>
<option value="<%=id1 %>"><%=id1 %></option>
<%
}
}
catch(Exception e)
{
out.println("wrong entry"+e);
}
%>
</select><br><br>
<label for="month">Month:</label>
<select name="month" id="H1">
<option>Select Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<label for="year">Year:</label>
<select name="year" id="I1">
<option>Select Year</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
</select><br><br>
<td>
<label for="details">Details:</label>
<input type="text" name="details" id="J1" style="width:'50px';">
</td><br><br>
<tr>
<td><label for="Tax">Tax:</label><input type="text" id="B1" value="" data-format="0,0[.]00" /></td><br><br>
<td><label for="Tax">Cess:</label><input type="text" id="C1" value="" data-format="0,0[.]00" /></td><br><br>
<td><label for="Tax">Interest/Penality:</label><input type="text" id="D1" value="" data-format="0,0[.]00 " /></td><br><br>
<td><label for="Tax">Total:</label><input type="text" name="total" id="E1" value="" data-format="0,0[.]00" data-formula="($B1+$C1+$D1)" /></td><br>
</tr>
<tr>
<td><input type="button" id="irow" value="Add" onclick="Javascript:addRow()" ></td>
<td><input type="reset" value="Reset" /></td>
</tr>
</form>
<hr>
<table id="list" border="1" >
<tr>
<td>Service Name</td>
<td>Month</td>
<td>Year</td>
<td>Details</td>
<td>Amount</td>
<td> </td>
</tr>
</table>
<!-- <tr>
<td colspan="6" style="text-align: right">Total Price :</td>
<td id="F1" data-format="0,0[.]00" data-formula="SUM($E1,$E5)"></td>
</tr>-->
</div>
</div>
</body>
我也使用 jquery 完成了此操作，但只显示第一列和最后一列的值，而不是列之间的值。如何在列之间显示以及如何在使用 jquery 显示值后编辑行。如何将特定的行值提取到表单上？
【问题讨论】：
-
我应该为编辑操作创建新表单还是我们可以在同一个表单上执行。有人可以帮我解决我的问题吗....
-
$('#list tbody tr:eq(index)') 使用 equal 可以传递 tr 的索引并获取特定 tr 的对象。在 td 中也是这样
-
$('#list tbody tr:eq(0) td:eq(1)').html() 。像这样检查
-
让我知道它是否有效？
-
非常感谢您.... @jQuery 它运行良好。但是 tr:eq(0) 必须是 tr:eq(1) - $('#list tbody tr:eq(1) td:eq(0)').html();