使用jquery在表中添加新列

Question

您好，我需要您的帮助，我有这个刀片：

                       <div class="row">
                        <div class="form-group col-sm-12">
                            <div class="col-xs-offset-12 col-xs-2">
                                <button type="button" class="btn btn-block btn-flat btn-primary btn-sm" id="add_column" title="@lang('buttons.add_new_option')">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                 <table class="optionsForm" style="width:100%">
                <tr>
                  <th> 
                    </th>  @for($c = 1; $c<=4; $c++)
                      <th>   
                        <input type="text" name="options{{ $c }}" value="{{ old('options.'.$c) }}" 
                        class="form-control" placeholder="Column {{ $c }} "> 
                    </th>
                    @endfor
                  </tr>  


                  @for($r = 1; $r <=4; $r++)
                    <tr>
                        <td>
                          <input type="text" name="match{{ $r}}" value="{{ old('match.'.$r) }}"  
                                 class="form-control" placeholder="Row {{ $r }} ">
                        <td>
                          <input type="radio" name="col_nr[{{ $r  }}]" value="1" class="col1">
                        </td>
                        <td>
                          <input type="radio" name="col_nr[{{ $r  }}]" value="2" class="col2">
                        </td>
                        <td>
                          <input type="radio" name="col_nr[{{ $r  }}]"  value="3" class="col3">
                        </td> 
                        <td>
                          <input type="radio" name="col_nr[{{ $r  }}]" value="4" class="col4">
                        </td>
                        <input type="hidden" name="row_col_nr[{{$r}}]" value="0" class="row_col_nr{{ $r  }}">

                  </tr>
                @endfor
                <tr> 
                </tr>
              </table> 
         <div class="row">
                        <div class="form-group col-sm-12">
                            <div class=" col-xs-3">
                                <button type="button" class="btn btn-block btn-flat btn-primary btn-sm" id="add_option" title="@lang('buttons.add_new_option')">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>

视图就像一张桌子.. 另一方面，我的js代码是这个，我使用两个按钮add_option和添加列，因为添加行更容易我设法解决，但添加列我有一个问题：

<script>
var i = 4;
  var p = 1;
  $(document).ready(function () {
    $('#add_option').click(function () {
      i++;
      $('.optionsForm').append('<tr><td><input type="text" name="match'+ i +'" value="{{ old('match. + p +') }}"  class="form-control" placeholder="Row ' + i +' "><td><input type="radio" name="col_nr['+ i +']"  value="1" class="col1" ></td><td><input type="radio" name="col_nr['+ i +']" value="2" class="col1" ></td><td><input type="radio" name="col_nr['+ i +']"   value="3" class="col1" ></td><td><input type="radio" name="col_nr['+ i+']"value="4" class="col1" ></td></tr>');

    }
    );
    $(document).on('click', 'button[id=delete_option]', function () {
      console.log('test');
      if (i > 1) {
        var removeValue = $(this).val();
        $('#option' + removeValue).remove();
        --i;
      }
    }
    );
  }
  );
</script>
<script type="text/javascript">
    var i = 4;
  var p = 1;
  $(document).ready(function () {
    $('#add_column').click(function () {
      i++;
      $('.optionsForm ').append('<tr></tr><tr><th><input type="text" name="options'+ i +'" value="{{ old('options. + p +') }}"  class="form-control" placeholder="Col ' + i +' "></th></tr>');

    }
    );
    $(document).on('click', 'button[id=delete_option]', function () {
      console.log('test');
      if (i > 1) {
        var removeValue = $(this).val();
        $('#option' + removeValue).remove();
        --i;
      }
    }
    );
  }
  );
</script>

为了添加一个新行，它工作正常，但是我有问题的列，我不能在最后一个无线电输入不在正确位置后在正确的地方添加新列..有人可以请帮助我

Answer 1

按照您的意愿尝试此代码

<!doctype html>
<html>
  <head>
    <title>tiff.js demo</title>
  </head>
  <body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
$(document).ready(function(){
	
$(".get_attr").click(function (){
	var trow;//=$('.optionsForm tr:first').html();
	trow='<th>Class</th>';
	$('.optionsForm tr:first').append(trow);
	var tdr={};//=$('.optionsForm tr:first').html();
	tdr=['<td>sdg</td>','<td>sdfg</td>','<td>sdgds</td>'];
	var rowleng=$('.optionsForm tbody tr').length;
	for(i=0;i<=rowleng;i++)
	    {
			$('.optionsForm tbody tr').eq(i).append(tdr[i]);
		
		}
   });

});
    </script>
  </body>
  
<table border="1" class='optionsForm'>
  <thead><tr><th>Name</th></tr></thead>
  <tbody>
  <tr><td>sdg</td></tr>
  <tr><td>sdfg</td></tr>
  <tr><td>sdgds</td></tr>
  </tbody>
 
  
  </table>
  
  <button type="button" data-id="5" class="get_attr" >Click Me</button>
  
</html>

还在相应的cloumn中添加了行列值