從給定的內容中動態添加和刪除jQuery的行

我試着按照引用各種網站的代碼，但堅持添加/刪除動態行。從給定的內容中動態添加和刪除jQuery的行

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
</head> 
<form> 
Name: <input type="text" id="name" value=""></input></br> 
Gender : <input type="radio" name="sex" value="male">M &nbsp;&nbsp 
    <input type="radio" name="sex" value="female">F</br> 

Resident: <input type="checkbox" name="resident" value="Yes">Yes &nbsp;&nbsp 
     <input type="checkbox" name="resident" value="No">No 
</br> 
Edu : <select name="selectbox" id="selectbox"> 
<option value="A">A</option> 
<option value="B">B</option> 
<option value="C">C</option> 
</select> 
</br> 
<input type="submit" id="button" value="Submit"> 
</form> 
<table width="400" border="1" id="empinfo" cellpadding="2" cellspacing="2"> 
<tr> 
    <th>Name</th> 
    <th>Gender</th> 
    <th>Resident</th> 
    <th>Edu</th> 
    <th>Action</th> 
    </tr> 

</table> 

<script language="javascript" type="text/javascript"> 

$(document).ready(function() { 

    $("#button").click(function(){ 
     var name = $('#name').val(); 
     var gender = $('input:radio[name=sex]:checked').val(); 
     var resident= $('input:checkbox:checked').val(); 

    }); 
});   

</script> 
</html>

我創建了一個HTML表單和發佈數據，我必須表明提交
信息表同一頁上，並在操作列需要顯示編輯和刪除按鈕。如果我按編輯，然後信息需要在同一頁面上打開，當我提交它會影響表格。如果我按刪除按鈕，那麼行需要刪除。所有這些操作只能通過使用Javascript和Jquery。

請幫我解決這個問題。

來源

2015-06-01 Dipak Dendage

下面是修改代碼：

$(document).ready(function() { 

    $("#button").click(function(e){ 
     e.preventDefault(); 
     var name = $('#name').val(); 
     var gender = $('input:radio[name=sex]:checked').val(); 
     var resident= $('input:checkbox:checked').val(); 
     var education = $("#selectbox").val(); 

     var content = '<td>' + name + '</td>' + 
        '<td>' + gender + '</td>' + 
        '<td>' + resident + '</td>' + 
        '<td>' + education + '</td>' + 
      '<td><button class="edit-row">Edit</button><button class="delete-row">Delete</button></td>'; 

     if ($(this).hasClass('save-edit')) { 
      $('.editing').html(content); 
      $("#button").removeClass('save-edit').val('Submit'); 
     } else { 
      var rowContent = '<tr class="employee-row">' + content + '</tr>'; 
      $('#empinfo').append(rowContent); 
     } 
    }); 

    $('body').on('click', '.edit-row', function (e) { 
     $('.editing').removeClass('editing'); 
     $(this).closest('.employee-row').addClass('editing'); 
     $("#button").addClass('save-edit').val('Save'); 
    }); 

    $('body').on('click', '.delete-row', function (e) { 
     $(this).closest('.employee-row').remove(); 
    }); 
});

和的jsfiddle： https://jsfiddle.net/s6wty7vv/2/

來源

2015-06-02 08:57:43

這是一個工作解決方案：

HTML：與您更新的相同。

的Javascript：

$(document).ready(function() { 

    $("#button").click(function(e){ 
     e.preventDefault(); 
     var name = $('#name').val(); 
     var gender = $('input:radio[name=sex]:checked').val(); 
     var resident= $('input:checkbox:checked').val(); 
     var education = $("#selectbox").val(); 

     var rowContent = '<tr>' + 
          '<td>' + name + '</td>' + 
          '<td>' + gender + '</td>' + 
          '<td>' + resident + '</td>' + 
          '<td>' + education + '</td>' + 
          '<td></td>' + 
          '</tr>'; 
     $('#empinfo').append(rowContent); 

    }); 
});

查看工作代碼：https://jsfiddle.net/s6wty7vv/1/

然而，這將不會持久，除非你刪除防止默認，並添加一個表單提交，並配合它到後臺，或保留根據需要防止默認並添加ajax調用以將此數據保留在後端。

來源

2015-06-01 18:18:46

謝謝。你的代碼適用於添加行，但是如何編輯和刪除行？如果您有任何想法，請告訴我。 –

我認爲這是你在找什麼：

<html> 
 

 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
</head> 
 
<form> 
 
    Name: 
 
    <input type="text" id="name" value=""></input> 
 
    </br> 
 
    Gender : 
 
    <input type="radio" name="sex" value="male">M &nbsp;&nbsp 
 
    <input type="radio" name="sex" value="female">F</br> 
 

 
    Resident: 
 
    <input type="checkbox" name="resident" value="Yes">Yes &nbsp;&nbsp 
 
    <input type="checkbox" name="resident" value="No">No 
 
    </br> 
 
    Edu : 
 
    <select name="selectbox" id="selectbox"> 
 
    <option value="A">A</option> 
 
    <option value="B">B</option> 
 
    <option value="C">C</option> 
 
    </select> 
 
    </br> 
 
    <input type="submit" id="button" value="Submit"> 
 
</form> 
 
<table width="400" border="1" id="empinfo" cellpadding="2" cellspacing="2"> 
 
    <tr> 
 
    <th>Name</th> 
 
    <th>Gender</th> 
 
    <th>Resident</th> 
 
    <th>Edu</th> 
 
    <th>Action</th> 
 
    </tr> 
 

 
</table> 
 

 
<script language="javascript" type="text/javascript"> 
 
    $(document).ready(function() { 
 

 
    $("#button").click(function() { 
 
     var name = $('#name').val(); 
 
     var gender = $('input:radio[name=sex]:checked').val(); 
 
     var resident = $('input:checkbox:checked').val(); 
 
     var edu = $('#selectbox').val(); 
 

 
     var rowToAdd = $('<tr>'); 
 

 
     rowToAdd.html('<td></td><td></td><td></td><td></td><td></td>'); 
 

 
     rowToAdd.find('td:nth-child(1)').html(name); 
 
     rowToAdd.find('td:nth-child(2)').html(gender); 
 
     rowToAdd.find('td:nth-child(3)').html(resident); 
 
     rowToAdd.find('td:nth-child(4)').html(edu); 
 
     $('#empinfo').append(rowToAdd); 
 
    }); 
 
    }); 
 
</script> 
 

 
</html>

來源

2015-06-01 18:21:07

從給定的內容中動態添加和刪除jQuery的行

回答

相關問題