使用javascript/jquery向表中添加新行_Javascript_Jquery_Html_Ruby On Rails

使用javascript/jquery向表中添加新行

javascript jquery html ruby-on-rails

使用javascript/jquery向表中添加新行,javascript,jquery,html,ruby-on-rails,Javascript,Jquery,Html,Ruby On Rails,我想在单击add按钮时向表中添加行，并使用javascript/jquery使用delete按钮删除行。我已尝试编写以下代码： <script src="/js/jquery-2.0.3.js"></script> <script> /* Javascript for phone numbers*/ $(document).ready(function() { var counter = 2; var co

我想在单击add按钮时向表中添加行，并使用javascript/jquery使用delete按钮删除行。我已尝试编写以下代码：

<script src="/js/jquery-2.0.3.js"></script>
  <script>
    /* Javascript for phone numbers*/
    $(document).ready(function()
    { 
      var counter = 2;
      var count= 4;

      $("#add_phone").click(function() 
      {
        alert("whoah it worked");
        if(counter>=count)
        {
          alert("Only " + count + " Phone number allowed.");
          return false;
        }   

        var htmlToAppend = '<tr id="pn'+ counter +'"><th>
              <select class="phone_no">
                <option value="home">home</option>
                <option value="Business">Business</option>
                <option value="Business2">Business 2</option>
              </select>
            </th>
            <td><input type="text"/></td></tr>';
            $("#phone_number").append ( htmlToAppend );

        newTableRow.appendTo("#phone_number");
        counter++;
      });

      $("#delete_phone").click(function() 
      {
        if(counter==2)
        {
          alert("Cannot remove phone number");
          return false;
        }   
        counter--;

        $("#pn" + counter-1).remove();

      });
    });

我真的想要这个解决方案。有人能帮我吗

PS：我正在使用RubyonRails

尝试在每行末尾用一个

\n\

重写

htmlToAppend

变量

尝试在每行末尾用

\n\

重写

htmlToAppend

变量

在

htmlToAppend

变量中不能有换行符

var htmlToAppend = '<tr id="pn'+ counter +'"><th><select class="phone_no"><option value="home">home</option><option value="Business">Business</option><option value="Business2">Business 2</option></select></th><td><input type="text"/></td></tr>';
$("#phone_number").append ( htmlToAppend );

var htmlToAppend='homebusiness2'；
$（“#电话号码”）.append（htmlToAppend）；

对我来说也是一个常见的陷阱。

在

htmlToAppend

变量中不能有换行符

var htmlToAppend = '<tr id="pn'+ counter +'"><th><select class="phone_no"><option value="home">home</option><option value="Business">Business</option><option value="Business2">Business 2</option></select></th><td><input type="text"/></td></tr>';
$("#phone_number").append ( htmlToAppend );

var htmlToAppend='homebusiness2'；
$（“#电话号码”）.append（htmlToAppend）；

对我来说也是一个常见的陷阱。

您的字符串附加格式不正确

 var htmlToAppend = '<tr id="pn'+ counter +'"><th><select class="phone_no"> <option value="home">home</option> <option value="Business">Business</option> <option value="Business2">Business 2</option></select> </th><td><input type="text"/></td></tr>';

var htmlToAppend='home Business 2'；

fiddle中的工作示例

您的字符串附加格式不正确

 var htmlToAppend = '<tr id="pn'+ counter +'"><th><select class="phone_no"> <option value="home">home</option> <option value="Business">Business</option> <option value="Business2">Business 2</option></select> </th><td><input type="text"/></td></tr>';

var htmlToAppend='home Business 2'；

小提琴中的工作样本

增加计数器，而不是增加计数器

如需更多帮助，请使用以下示例

<html> 
    <h1>Add remove dynamically</h1>      
     <head>
     <title></title> 
     </head>     
 <body>

Living in:
<table id="purchaseItems" name="purchaseItems" style="display: inline-table;">
    <tr id="tr_1">
        <td>
            <input type="text" name="living_1" class="tbDescription next" required />
        </td>
        <td>
            <input type="text" name="biggest_1" class="next" required />
        </td>
        <td>
            <input type="text" name="nextbiggest_1" class="nextRow" required />
        </td>

        <td>
            <input type="button" name="addRow[]" id="remove_1" class="removeRow" value='-' />
        </td>

        <td>
            <input type="button" name="addRow[]" id="add_1" class="add" value='+' />
        </td>

    </tr>
</table>

</body>  
</html>
<script type="text/javascript">
$("#remove_1").hide();
$(document).ready(function () {

    $(document).on('click', '#purchaseItems .add', function () {

        var total_row = $('#purchaseItems tr').length;
        var rows = $('#purchaseItems tr').length+1;
      if(total_row < 5)
      {
        // clear the values
      $('#purchaseItems tr:last').after('<tr id="tr_'+rows+'"><td><input type="text" name="living_'+rows+'" id="living_'+rows+'" class="tbDescription next"></td><td><input type="text" name="biggest_'+rows+'" id="biggest_'+rows+'" class="next"></td><td><input type="text" name="nextbiggest_'+rows+'" id="nextbiggest_'+rows+'" class="nextRow"></td><td><input type="button" name="addRow[]" id="remove_'+rows+'" class="removeRow" value="-"></td><td><input type="button" name="addRow[]" id="add_'+rows+'" class="add" value="+"></td></tr>');
      $(".add").hide();
      $(".removeRow").show();
      $("#add_"+rows).show();
      }
      else
      {
        alert("Maximum limit reached.")
      }

    });

    $(document).on('keypress', '#purchaseItems .next', function (e) {
        if (e.which == 13) {
            var v = $(this).index('input:text');
            var n = v + 1;
            $('input:text').eq(n).focus();
            //$(this).next().focus();
        }
    });
    $(document).on('keypress', '#purchaseItems .nextRow', function (e) {
        if (e.which == 13) {
            $(this).closest('tr').find('.add').trigger('click');
            $(this).closest('tr').next().find('input:first').focus();
        }
    });
    $(document).on('click', '#purchaseItems .removeRow', function () {
        var total_row = $('#purchaseItems tr').length;
        if ($('#purchaseItems .add').length > 1) {
            $(this).closest('tr').remove();
            var last_tr_id = $('#purchaseItems tr:last').attr("id").split("_")[1];
            $("#add_"+last_tr_id).show();
        }
        if ($('#purchaseItems .add').length == 1) {
         $(".removeRow").hide();
        }
    });

});
</script>


动态添加和删除
居住在：
$（“#删除_1”）.hide（）；
$（文档）.ready（函数（）{
$（文档）.on（'单击'，'#purchaseItems.add'，函数（）{
var total_row=$（'#purchaseItems tr'）。长度；
变量行=$（'#purchaseItems tr'）。长度+1；
如果（总行数<5）
{
//清除值
$（'#purchaseItems tr:last'）。在（''）之后；
$（“.add”）.hide（）；
$（“.removeRow”）.show（）；
$（“#添加#”+行）.show（）；
}
其他的
{
警报（“已达到最大限制”）
}
});
$（document）.on（'keypress'，'#purchaseItems.next'，函数（e）{
如果（e.which==13）{
var v=$（this.index（'input:text'）；
var n=v+1；
$（'input:text'）.eq（n）.focus（）；
//$（this.next（）.focus（）；
}
});
$（document）.on（'keypress'，'#purchaseItems.nextRow'，函数（e）{
如果（e.which==13）{
$（this）.closest（'tr'）。find（'.add'）。trigger（'click'）；
$（this）.closest（'tr'）.next（）.find（'input:first'）.focus（）；
}
});
$（文档）.on（'单击'，'#purchaseItems.removeRow'，函数（）{
var total_row=$（'#purchaseItems tr'）。长度；
如果（$（'#purchaseItems.add'）。长度>1）{
$（this）.closest（'tr'）.remove（）；
var last_tr_id=$（'#purchaseItems tr:last'）.attr（“id”）.split（“#”）[1]；
$（“#添加”+最后一个_tr_id）.show（）；
}
如果（$（'#purchaseItems.add'）。长度==1）{
$（“.removeow”）.hide（）；
}
});
});

递增您没有递增的计数器

如需更多帮助，请使用以下示例

<html> 
    <h1>Add remove dynamically</h1>      
     <head>
     <title></title> 
     </head>     
 <body>

Living in:
<table id="purchaseItems" name="purchaseItems" style="display: inline-table;">
    <tr id="tr_1">
        <td>
            <input type="text" name="living_1" class="tbDescription next" required />
        </td>
        <td>
            <input type="text" name="biggest_1" class="next" required />
        </td>
        <td>
            <input type="text" name="nextbiggest_1" class="nextRow" required />
        </td>

        <td>
            <input type="button" name="addRow[]" id="remove_1" class="removeRow" value='-' />
        </td>

        <td>
            <input type="button" name="addRow[]" id="add_1" class="add" value='+' />
        </td>

    </tr>
</table>

</body>  
</html>
<script type="text/javascript">
$("#remove_1").hide();
$(document).ready(function () {

    $(document).on('click', '#purchaseItems .add', function () {

        var total_row = $('#purchaseItems tr').length;
        var rows = $('#purchaseItems tr').length+1;
      if(total_row < 5)
      {
        // clear the values
      $('#purchaseItems tr:last').after('<tr id="tr_'+rows+'"><td><input type="text" name="living_'+rows+'" id="living_'+rows+'" class="tbDescription next"></td><td><input type="text" name="biggest_'+rows+'" id="biggest_'+rows+'" class="next"></td><td><input type="text" name="nextbiggest_'+rows+'" id="nextbiggest_'+rows+'" class="nextRow"></td><td><input type="button" name="addRow[]" id="remove_'+rows+'" class="removeRow" value="-"></td><td><input type="button" name="addRow[]" id="add_'+rows+'" class="add" value="+"></td></tr>');
      $(".add").hide();
      $(".removeRow").show();
      $("#add_"+rows).show();
      }
      else
      {
        alert("Maximum limit reached.")
      }

    });

    $(document).on('keypress', '#purchaseItems .next', function (e) {
        if (e.which == 13) {
            var v = $(this).index('input:text');
            var n = v + 1;
            $('input:text').eq(n).focus();
            //$(this).next().focus();
        }
    });
    $(document).on('keypress', '#purchaseItems .nextRow', function (e) {
        if (e.which == 13) {
            $(this).closest('tr').find('.add').trigger('click');
            $(this).closest('tr').next().find('input:first').focus();
        }
    });
    $(document).on('click', '#purchaseItems .removeRow', function () {
        var total_row = $('#purchaseItems tr').length;
        if ($('#purchaseItems .add').length > 1) {
            $(this).closest('tr').remove();
            var last_tr_id = $('#purchaseItems tr:last').attr("id").split("_")[1];
            $("#add_"+last_tr_id).show();
        }
        if ($('#purchaseItems .add').length == 1) {
         $(".removeRow").hide();
        }
    });

});
</script>


动态添加和删除
居住在：
$（“#删除_1”）.hide（）；
$（文档）.ready（函数（）{
$（文档）.on（'单击'，'#purchaseItems.add'，函数（）{
var total_row=$（'#purchaseItems tr'）。长度；
变量行=$（'#purchaseItems tr'）。长度+1；
如果（总行数<5）
{
//清除值
$（'#purchaseItems tr:last'）。在（''）之后；
$（“.add”）.hide（）；
$（“.removeRow”）.show（）；
$（“#添加#”+行）.show（）；
}
其他的
{
警报（“已达到最大限制”）
}
});
$（document）.on（'keypress'，'#purchaseItems.next'，函数（e）{
如果（e.which==13）{
var v=$（this.index（'input:text'）；
var n=v+1；
$（'input:text'）.eq（n）.focus（）；
//$（this.next（）.focus（）；
}
});
$（document）.on（'keypress'，'#purchaseItems.nextRow'，函数（e）{
如果（e.which==13）{
$（this）.closest（'tr'）。find（'.add'）。trigger（'click'）；
$（this）.closest（'tr'）.next（）.find（'input:first'）.focus（）；
}
});
$（文档）.on（'单击'，'#purchaseItems.removeRow'，函数（）{
var total_row=$（'#purchaseItems tr'）。长度；
如果（$（'#purchaseItems.add'）。长度>1）{
$（this）.closest（'tr'）.remove（）；
var last_tr_id=$（'#purchaseItems tr:last'）.attr（“id”）.split（“#”）[1]；
$（“#添加”+最后一个_tr_id）.show（）；
}
如果（$（'#purchaseItems.add'）。长度==1）{
$（“.removeow”）.hide（）；
}
});
});

使用Jquery尝试这种方法

<form id="myForm">

    <div class="clonedInput">
        <input type="text" class="phone_oa" id="textPhone1" name="input1" placeholder="Enter phone number" style="width: 110px;" />
        <input type="button" name="btnDelete1" class="btnDel" value="Remove" disabled="disabled" />
    </div>

    <div id="addDelButtons" style="margin-top: 10px;">
        <button type="button" id="btnAdd" class="btn" >Add Another Number</button>
    </div>  

</form>


再加一个号码

剧本

var inputs = 1; 

    $('#btnAdd').click(function() {
        $('.btnDel:disabled').removeAttr('disabled');
        var c = $('.clonedInput:first').clone(true);
        c.children(':text').attr('name','input'+ (++inputs) ).val('');
        c.children(':text').attr('id','textPhone'+ (inputs) ).val('');
        c.children(':button').attr('name','btnDelete'+ (inputs) );
        $('.clonedInput:last').after(c);

        $('#btnAdd').attr('disabled',($('.clonedInput').length  > 4));
    });

    $('.btnDel').click(function() {
        if (confirm('Confirm delete?')) {
            --inputs;
            $(this).closest('.clonedInput').remove();
            $('.btnDel').attr('disabled',($('.clonedInput').length  < 2));
            $('#btnAdd:disabled').removeAttr('disabled');
            fixNames();
        }
    });

    function fixNames(){
        var i = inputs;
        while(i--) {
            $('input:text')[i].name = 'input'+ (i+1);
            $('input:button')[i].name = 'btnDelete'+ (i+1);
        }
    }

var输入=1；
$（'#btnAdd'）。单击（函数（）{
$（'.btnDel:disabled'）.removeAttr（'disabled'）；
var c=$（'.clonedInput:first'）.clone（true）；
c、 子项（':text'）.attr（'name'，'input'+（++inputs））.val（''；
c、 子项（':text'）.attr（'id'，'textPhone'+（输入））.val（''；
c、 子项（':button'）.attr（'name'，'btnDelete'+（inputs））；
$（'.clonedInput:last'）。在（c）之后；
$（'#btnAdd'）.attr（'disabled'），（$（'.clonedInput'）.length>4）；
});
$（'.btnDel'）。单击（函数（）{
如果（确认（“确认删除”））{
--投入；
$（this）.closest（'.clonedInput'）.remove（）；
$（'.btnDel'）.attr（'disabled'，（$（'.clonedInput'）.length<2））；
$（'#btnAdd:disabled'）。removeAttr（'disabled'）；
固定名称（）；
}
});
函数fixNames（）{
var i=输入；
而(我--){