Question

我有文本框，日期选择器和添加按钮。当我点击添加按钮时，在文本框和日期选择器中输入的数据应该填充在表格中，这是我已经完成的。

假设我已经在每行的末尾填充了三行保存和删除锚点，当我点击保存特定行时应保存以知道特定行的值是否在打印时显示警告其显示空格

HTML：

<br>
     class Name<br><input type ="text" id="className"></input><br><br>
     Subject<br><input type="text" id="subJect"></input><br><br>
     Max<br><input type="text"    id="max"></input><br><br>
     Min<br><input type ="text" id="min"></input><br><br>
    Sd<br><input type="text" id="sd"></input><br><br>
     Ed<br><input type="text"    id="ed"></input><br><br>
      <button type="button" id="btnSubmit">Submit</button><br><br><br>

 <table id="mytable1" border="1" class="tbinput" style="width:30%">
  <tr>
    <th>class Name</th>
    <th>Subject</th>     
    <th>Max</th>
    <th>Min</th>
    <th>Sd</th>     
    <th>Ed</th>
    <th colspan="2">Action</th>
  </tr>
</table>

Js：

 $(document).ready(function() {
                var count = 1;
                $('#btnAdd').click(
                                function() {




                                    var newClassName = $('#className').val();
                                    var newSubject = $('#subject').val();
                                    var newMaxMarks = $('#maxMarks1').val();
                                    var newMinMarks = $('#minMarks1').val();
                                    var newSD = $('#txt5').val();
                                    var newED = $('#txt6').val();                               



                                    if(newClassName !=''){                              

                                    count++;
                                    var txtClassName = "txtClassName"+ count;
                                    var txtSubject = "txtSubject" + count;
                                    var txtMaxMarks = "txtMaxMarks" + count;
                                    var txtMinMarks = "txtMinMarks" + count;
                                    var txtSD = "txtSD" + count;
                                    var txtED = "txtED" + count;
                                    var txClassName="txClassName";
                                    var newTr = '<tr><td>  <input type="text" id='+ txtClassName + ' name='+ txClassName + '  value='+ newClassName +'  ></td><td><input type="text" id='+txtSubject+' value='+newSubject+' ></td><td><input type="text" id='+ txtMaxMarks+' value='+newMaxMarks+' ></td><td><input type="text" id='+txtMinMarks+' value='+newMinMarks+'></td> <td><input type="text" id='+txtSD+' value='+newSD+'></td> <td><input type="text" id='+txtED+' value='+newED+'></td> <td class="omit"><a href="#" class="save">save</a></td><td ><a href="#" class="delete">Delete</a></td></tr>';
                                    $('#myTable').append(newTr);                            

                                        }

                                    $("#className").val("");                                        
                                    $('#subject').val("");
                                    $('#maxMarks1').val("");                                        
                                    $('#minMarks1').val("");
                                    $('#txt5').val("");
                                    $('#txt6').val("")

                                });


            });

保存

     $(document).on('click', '.save', function(e){
    var inputs = "";
  $(this).closest('tr').find('input[type="text"]').each(function(){
    if(!$(this).hasClass('omit')){
     inputs += $(this).text() + " , "; 
    }
  });
  alert(inputs);
});

Answer 1

将on()用于动态追加的元素。

保存详细信息

<a href="#" class="save">Save</a>

$('body').on('click', '.save',function(){
   //Do your coding here          
});

删除详细信息

<a href="#" class="delete">delete</a>

$('body').on('click', '.delete',function(){
   //Do your coding here      
   $(this).closest('tr').remove(); //Remove clicked TR    
});

注意事项

不要忘记将动态唯一ID应用于所有元素，或者您可以使用类选择器。
将名称属性应用于所有输入。
使用serialize()或.serializeArray()获取值，然后您可以使用ajax保存详细信息。

＆＃13;

$(document).ready(function(){
   var count = 1; 
$('#btnAdd').click(function () {
var newClassName = $('#txt1').val();
var newSubject = $('#txt2').val();
var newMaxMarks = $('#txt3').val();
var newMinMarks = $('#txt4').val();
var newSD       = $('#txt5').val();
var newED       = $('#txt6').val();

    count++;
    var txtClassName = "txtClassName" + count;
    var txtSubject = "txtSubject" + count;
    var txtMaxMarks = "txtMaxMarks" + count;
    var txtMinMarks = "txtMinMarks" + count;
	var txtSD = "txtSD" + count;
	var txtED = "txtED" + count;


  var newTr = '<tr><td><input type="text" id='+txtClassName+ ' value="'+newClassName+'" name="'+txtClassName+'" /></td><td><input type="text" id='+txtSubject+' value="'+newSubject+'"   name="'+newSubject+'" /></td><td><input type="text" id='+ txtMaxMarks+' value="'+newMaxMarks+'"  name="'+newMaxMarks+'"  /></td><td><input type="text" id='+txtMinMarks+' value="'+newMinMarks+'" name="'+newMinMarks+'"></td> <td><input type="text" id='+txtSD+' value="'+newSD+'" name="'+newSD+'"></td> <td><input type="text" id='+txtED+' value="'+newED+'" name="'+newED+'"></td> <td><a href="#" class="save">Save</a></td><td ><a href="#" class="delete">Delete</a></td></tr>';
    $('#myTable').append(newTr);
    

});

  $('body').on('click', '.delete',function(){
    //Do your coding here      
    $(this).closest('tr').remove(); //Remove clicked TR    
  });
  
  
  
  $('body').on('click', '.save',function(e){
        e.preventDefault() // don’t let it submit
    //Do your coding here      
        console.log($(this).closest('tr').find('input').serialize());
   //Ajax clal
  });
  

});

＆＃13;

table tbody tr:hover {
	background-color: orange;
	cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Class:<input type="text" id="txt1" />
Subject :<input type="text" id="txt2" />
Max Marks :<input type="text" id="txt3" />
Max Marks :<input type="text" id="txt4" />
Start Date :<input type="text" id="txt5" />
End Date :<input type="text" id="txt6" />


 <button type="button"  id="btnAdd" class="button-add">Click Me!</button>
<br><br><br><br>


  <table id="myTable">
    <th>class</th>
    <th>Subject</th>
    <th>Max Marks</th>
    <th>Min Marks</th>
	<th>Start Date</th>
    <th>End Date</th>
    <th colspan="2">Action</th>
</table>

＆＃13;

Answer 2

为删除或保存锚标记提供一个类，然后在$(document).on('click', '.delete', function(){上设置点击事件，并使用tr找到他们最近的父$(this).closest('tr')，并使用{{删除它1}}功能

remove()

类似的你可以为保存功能做同样的事情，在那里你可以找到相关的tr，然后对它进行操作

JSFIDDLE

单击特定行时如何选择表中的特定行

2 个答案: