1.页面代码:
<tr>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>重量</th>
<th>价格</th>
</tr><tr class="product">
<th>1</th>
<td></td>
<td></td>
<td></td>
<td></td> 
</tr> 实现了可以实时编辑表单数据,就是在td中加入input标签,
在单独js中通过$(".product td:nth-child(3) input").val()可以获取该数据,我想通过blur来alert失去焦点后写入的数据,请问怎么写代码? 2.在单独js中通过var price = $(".product td:nth-child(3) input").val()可以获取数据,然后写上if(isNaN(price)){alert("单价必须为数字");}就出错了,FF没有报错,原来的样式没有,原来的可以实时编辑的表格也不能编辑,只是在点了页面上的按钮后报错!

解决方案 »

  1.   


    <script src="js/jquery-1.3.2.js" type="text/javascript"> </script> 
    <script type="text/javascript"> 
    window.onload=function(){
    $("tbody td").click(function(){
                var obj = $(this);
                if(obj.children("input").length > 0){
                    return false;
                }
                var text = obj.html();
                obj.html("");
                var inputObj = $("<input type='text'>").css("border-width","0").css("font-size","16px")
                    .width(obj.width()).css("background-color",obj.css("background-color")).css("text-align","center")
                    .val(text).appendTo(obj).blur(function(){
                     var s = $(this).val();
                     if(isNaN(s)) {alert("不是数字");$(this).focus()}
                     else alert(s);
                });
                inputObj.trigger("focus").trigger("select");
                inputObj.click(function(){
                    return false;    
                }) ;
    });}
    function doit(){
      $(".product td:nth-child(5) input").each(function(){
         alert($(this).val())    
      })
    }
    </script>
    <input type="button" onclick="doit();" value="click">
    <table>
    <tbody id="tbody"> 
                <tr> 
                    <th>序号 </th> 
                    <th>名称 </th> 
                    <th>单价 </th> 
                    <th>重量 </th> 
                    <th>价格 </th> 
                </tr>
                <tr class="product"> 
                    <td>1</td> 
                    <td>xxx</td> 
                    <td>1.2</td> 
                    <td>1.3</td> 
                    <td>1.4</td>    
                </tr> 
                <tr class="product"> 
                    <td>2</td> 
                    <td>xxx</td> 
                    <td>2.2</td> 
                    <td>2.3</td> 
                    <td>2.4</td>    
                </tr> 
    </tbody> 
    </table>
      

  2.   


    <script src="js/jquery-1.3.2.js" type="text/javascript"> </script> 
    <script type="text/javascript"> 
    window.onload=function(){
    $("tbody td:nth-child(3), tbody td:nth-child(4)").click(function(){
                var obj = $(this);
                if(obj.children("input").length > 0){
                    return false;
                }
                var text = obj.html();
                obj.html("");
                var inputObj = $("<input type='text'>").css("border-width","0").css("font-size","16px")
                    .width(obj.width()).css("background-color",obj.css("background-color")).css("text-align","center")
                    .val(text).appendTo(obj).blur(function(){
                        var s = $(this).val();
                        if(isNaN(s)) {alert("不是数字");$(this).focus()}
                        else{
                         var obj1 = $(this).parent().parent().children("td:nth-child(3)");
                         var obj2 = $(this).parent().parent().children("td:nth-child(4)");
                         if(obj1.children().filter("input").length==0) k1= obj1.text();
                         else k1 = obj1.children().filter("input").val();
                         if(obj2.children().filter("input").length==0) k2= obj2.text();
                         else k2 = obj2.children().filter("input").val();
                         var sum = Math.round(k1*k2*100)/100;
                         $(this).parent().parent().children("td:nth-child(5)").html(sum);
                        };
                });
                inputObj.trigger("focus").trigger("select");
                inputObj.click(function(){
                    return false;    
                }) ;
    });}
    function doit(){
      $(".product td:nth-child(5) input").each(function(){
         alert($(this).val())    
      })
    }
    </script>
    <input type="button" onclick="doit();" value="click">
    <table>
    <tbody id="tbody"> 
                <tr> 
                    <th>序号 </th> 
                    <th>名称 </th> 
                    <th>单价 </th> 
                    <th>重量 </th> 
                    <th>价格 </th> 
                </tr>
                <tr class="product"> 
                    <td>1</td> 
                    <td>xxx</td> 
                    <td>1.2</td> 
                    <td>1.3</td> 
                    <td>1.4</td>    
                </tr> 
                <tr class="product"> 
                    <td>2</td> 
                    <td>xxx</td> 
                    <td>2.2</td> 
                    <td>2.3</td> 
                    <td>2.4</td>    
                </tr> 
    </tbody> 
    </table>