Question

使用该行的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>&nbsp;</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显示值后编辑行。如何在表单上获取特定的行值？

Answer 1

使用equal你可以传递tr的索引并得到特定tr的对象。同样的方式在td 见下面的例子

$('#list tbody tr:eq(1) td:eq(0)').html();

使用jquery在没有数据库操作的情况下使用该行的id编辑表的特定行

1 个答案: