0

1 .我想在单击按钮时动态生成包含具有唯一 ID 的文本框的 div

      <input id="<%:rid %>" type="button" value="reply"/>

2.我也想用jquery ajax mathod将文本框数据携带到ashx文件中。

谁能帮我

代码

 var lineItemCount = 0;
    $(document).ready(function () {

        $(".commentbox input[type='button']").click(function () {

            var id = $(this).attr("id");

            alert(id);

           var cid = id.substring(5);
           var containerid = "container" + cid;
           alert(containerid);

            //Increase the lineitemcount
            lineItemCount++;
            //Add a new lineitem to the container, pass the lineItemCount to makesure                      
            getLineItem() 
            // can generate a unique lineItem with unique Textbox ids
            $(containerid).append(getLineItem(lineItemCount));
        });
});
 //Create a new DIV with Textboxes
     function getLineItem(number) {
         var div = document.createElement('div');
         //Give the div a unique id
           div.setAttribute('id', 'lineitem_' + number);

         //pass unique values to the getTextbox() function
         var t1 = getTextbox('txt_' + number + '_1');
         div.appendChild(t1);
         return div;
     }

     //Create a textbox, make sure the id passed to this function is unique...
     function getTextbox(id) {
         var textbox = document.createElement('input');
         textbox.setAttribute('id', id);
         textbox.setAttribute('name', id);
         return textbox;
     }

在 aspx 页面中通过模型迭代

<%var i=1;%>
 <%foreach (var commentitem in item.commentsModelList)
  { 
    <table border="0"  class="commentbox">
    <tr>
      <%var rid = "reply" + i;%>
       <div id="<%:containerid %>">
        <td>  <input id="<%:rid %>" type="button" value="reply"/>
       </div>
    </td>
   </tr>
  </table>
  <% i++;}%>
4

1 回答 1

0

我稍微更改了您的标记以在我的点击事件中获取相应的项目 ID

HTML

 <table border="0"  class="commentbox">
    <tr>
        <td>Some Item text
        </td>
     </tr>
     <tr>
         <td>
             <div id="container-1" ></div>
             <input type="button" class='btnReply' id="reply-1" value="Reply" />             
         </td>
     </tr>
</table>

和脚本

 $(function(){     
      $(".commentbox .btnReply").click(function(){
        $(this).hide();
        var id=$(this).attr("id").split("-")[1]        
        var strDiv="<input type='text' class='txtCmnt' id='txtReply-"+id+"' /> <input type='button' class='btnSave' value='Save' id='btnSave-"+id+"' /> ";
        $("#container-"+id).html(strDiv);          
      });

       $(".commentbox").on("click",".btnSave",function(){
          var itemId=$(this).attr("id").split("-")[1]         
           var txt=$(this).parent().find(".txtCmnt").val();
           $.post("/echo/json/", {reply: txt, id: itemId},function(data){                            
               alert(data);
               //do whatever with the response
           })           
       });       
    });

这是 jsfiddle 示例：http: //jsfiddle.net/UGMkq/30/

您需要将发布目标网址更改为处理 ajax 响应的相关页面。

编辑：根据关于处理多个 Divs 的评论

只要您的容器 div id 是唯一的，它就可以工作，我只是将标记更改为包含多个项目。

 <table border="0"  class="commentbox">
    <tr>
        <td>Some Item text<br/>                
             <div id="container-1" ></div>
             <input type="button" class='btnReply' id="reply-1" value="Reply" />             
         </td>
     </tr>
      <tr>
        <td>Some Another Content here <br/>               
             <div id="container-2" ></div>
             <input type="button" class='btnReply' id="reply-2" value="Reply" />             
         </td>
     </tr>
</table>

这是示例：http://jsfiddle.net/UGMkq/44/

对于要呈现的上述输出，您可能希望像这样编写剃刀语法

<table border="0"  class="commentbox">
@foreach (var commentitem in item.commentsModelList)
{
   <tr>
      <td>Some Another Content here<br/>
          <div id="container-@(commentitem.Id)" ></div>
          <input type="button" class='btnReply' id="reply-@(commentitem.Id)" value="Reply" />             
       </td>
    </tr>
}
</table>

我没有为每个项目创建一个新表，而是在现有表中创建了一个新行。

于 2012-04-15T16:08:22.523 回答