正在检索添加的jquery行

Retrieving added jquery rows

本文关键字：jquery 添加 检索      更新时间：2023-09-26

检索用户添加的行中的所有数据时遇到问题。我尝试使用我的变量reclist来检索记录，但它给了我空白。

源代码如下：

<script type="text/javascript">
$(document).ready(function(){
   $('#btnAdd').live('click',function(){
      var name = $('#txtName').val();
      var name2 = $('#txtName2').val();
      $("#tbNames tr:last").after("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
  });
   $('#tbNames td img.delete').live('click',function(){
        $(this).parent().parent().remove(); 
   });
 });
</script>
<input id="txtName" type="text" />
<input id="txtName2" type="text" />
<input id="btnAdd" type="button" value="Add" />
   <table id="tbNames" >
      <tr>
         <td><b>Name</b></td>
         <td><b>Name2</b></td>
         <td><b>Delete</b></td>
      </tr>
      <tr>
          <td>Bingo</td>
          <td>Tingo</td>
          <td><img src="Delete.gif" height="15" class="delete" /></td>
      </tr>
   </table>
<script type="text/javascript">
$(document).ready(function() {
    $("#submit_app").button();
    $("#submit_app").click(function() {
    var reclist = $("#txtName").val();
    console.log(reclist);
    });
});
</script>
<input id="submit_app" type="button" style="height: 35px; width: 225px" value="Add New User" />

如果我错过了任何编码，请告知。

尝试以下代码。请在jsFiddle.net上查看此演示。这将为您提供表的td中的所有值。

$(document).ready(function() {
  $('#btnAdd').live('click', function() {
    var name = $('#txtName').val();
    var name2 = $('#txtName2').val();
    $("#tbNames tr:last").after("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
  });
  $('#tbNames td img.delete').live('click', function() {
    $(this).parent().parent().remove();
  });
  //$("#submit_app").button(); //Commented this line
  $("#submit_app").click(function() {
      var skipFirstRow = 0; //Skip first row
      $("#tbNames tr").each(function() {
          if (skipFirstRow++ == 0) return;
          var skipLastColumn = 0;
          $(this).children("td").each(function() {
              if (skipLastColumn++ == 2) return;
              alert($(this).html());
          });
     });
     var reclist = $("#txtName").val();
     console.log(reclist);
  });
});

编辑

检查一下这把小提琴。在这里，您将获得两个数组中的值。

$（"#txtName"）是指您在中声明的文本框

<input id="txtName" type="text" />

由于您想检索已插入表中的所有数据，因此应该使用$（"td"，"#tbNames"）并检索它们的.text（）

$("td", "#tbNames").each(function() {
    console.log($(this).text());
});

您需要将click事件绑定为live。由于正常绑定只会将事件绑定到首次呈现的页面上找到的元素

这是更正的部分：

<script type="text/javascript">
  $(document).ready(function() {
    $("#submit_app").button();
    $("#submit_app").live('click', function() {
     var reclist = $("#txtName").val();
      console.log(reclist);
    });
  });
</script>

您的提交按钮未被触发

http://jsfiddle.net/gBHh2/

相关文章：