1
jQuery를 사용하여 확장/축소 DataGrid를 만들었습니다. DataGrid에는 Add/Clone/Del/Select All table rows와 같은 기능이 있습니다.jQuery Add/Del/
추가 기능을 구현했습니다. 누구나 내게 델/클론/선택 모든 팁을 줄 수 있을까? http://jsfiddle.net/pixelfx/3fwyf/5/
A
답변
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var lastRowCount = 5;
$('tr.parent').css("cursor", "pointer").attr("title", "Click to expand/collapse").click(function() {
$(this).siblings('.child-' + this.id).toggle();
});
$('tr[class^=child-]').hide();
//var orderTable = $("#example");
$("#btnAdd").live('click', function (e) {
//Take the text, and also the ddl value and insert as table row.
var newRow = '<tr class="child-row123"><td class="brdr"> </td><td class="brdr"></td><td class="brdr"> </td><td class="brdr"> </td><td><input name="checkboxNNNN" type="checkbox" id="checkboxNNNN" class="SelectCheckBox" /></td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>';
$("#example tbody").append(newRow.replace(/NNNN/g, ++lastRowCount));
//var $orderTable = $("#example");
});
$('#btnDelete').live('click', function (e) {
$('.SelectCheckBox:visible:checked').parents('tr').remove();
});
$('#btnCopy').live('click', function (e) {
$("#example tbody").append($('.SelectCheckBox:visible:checked').parents('tr').clone());
});
$('#btnSelectAll').live('click', function (e) {
$("#example").find('.SelectCheckBox:visible').attr('checked', true);
});
$('#cbSelectUnselectAll').live('click', function() {
$("#example").find('.SelectCheckBox:visible').attr('checked', $(this).prop('checked'));
});
});
</script>
<style type="text/css">
table.detail, table.detail td, table.detail th
{
border-collapse: collapse;
border: 1px solid black;
}
table.detail tr.parent
{
font-weight: bold;
}
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="detail" id="example"
style="border: none;">
<thead>
<tr>
<th width="10%">
Customer Item
</th>
<th colspan="2">
</th>
<th width="12%" rowspan="2">
Variable Header Data Field
</th>
<th width="8%" rowspan="2">
PO Number
</th>
<th width="2%" rowspan="2">
</th>
<th width="10%" rowspan="2">
Available Quantity
</th>
<th colspan="2" rowspan="2">
Quantity to Order
</th>
<th width="10%" rowspan="2">
Variable Data Field
</th>
<th width="10%" rowspan="2">
Variable Data Field
</th>
<th width="10%" rowspan="2">
Variable Data Field
</th>
</tr>
<tr>
<th>
Fulfillment type
</th>
<th colspan="2">
<select name="fulfillmenttype" id="fulfillmenttype">
<option selected="selected">In-Plant</option>
<option>Service Bureau</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr id="row123" class="parent" style="cursor: pointer;" title="Click to expand/collapse">
<td>
Request type
</td>
<td colspan="2">
<input name="checkbox4" type="checkbox" id="checkbox4" checked="checked" />
</td>
<td>
J94
</td>
<td>
123456
</td>
<td>
</td>
<td>
200
</td>
<td width="7%">
180
</td>
<td width="5%">
198
</td>
<td>
<input name="textfield" type="text" id="textfield" value="11111" />
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="child-row123" style="display: none;">
<td class="brdr">
</td>
<td width="6%" class="brdr">
</td>
<td width="10%" class="brdr">
</td>
<td class="brdr">
</td>
<td>
<input type="checkbox" name="checkbox" class="SelectCheckBox" id="checkbox" />
</td>
<td>
<img src="images/magnify.gif" width="12" height="12" />
</td>
<td>
60
</td>
<td>
60
</td>
<td>
66
</td>
<td>
<input name="textfield2" type="text" id="textfield2" value="2222" />
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="child-row123" style="display: none;">
<td class="brdr">
</td>
<td class="brdr">
</td>
<td class="brdr">
</td>
<td class="brdr">
</td>
<td>
<input type="checkbox" name="checkbox2" id="checkbox2" />
</td>
<td>
<img src="images/magnify.gif" width="12" height="12" />
</td>
<td>
60
</td>
<td>
60
</td>
<td>
66
</td>
<td>
<input name="textfield3" type="text" id="textfield3" value="3333" />
</td>
<td>
</td>
<td>
</td>
</tr>
<tr class="child-row123" style="display: none;">
<td class="brdr">
</td>
<td class="brdr">
</td>
<td class="brdr">
</td>
<td class="brdr">
</td>
<td>
<input type="checkbox" name="checkbox3" id="checkbox3" />
</td>
<td>
<img src="images/magnify.gif" width="12" height="12" />
</td>
<td>
60
</td>
<td>
60
</td>
<td>
66
</td>
<td>
<input name="textfield4" type="text" id="textfield4" value="44444" />
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<label>
</label>
<input type="button" id="btnAdd" value="Add row" />
<input type="button" id="btnDelete" value="Remove Row" />
<input type="button" id="btnCopy" value="Copy Row" />
<!--<input type="button" id="btnSelectAll" value="Select All" />-->
<input type="checkbox" id="cbSelectUnselectAll" />Select/Unselect All
</body>
</html>
+0
이 링크를 참조하십시오 : http://jsfiddle.net/nanoquantumtech/9umGT/ – Thulasiram
관련 문제
- 1. JQuery - ASP.NET 및 JQuery
- 2. jQuery UI가 jQuery 플러그인입니까?
- 3. jquery UI없이 탭 jquery
- 4. jQuery - jQuery 플러그인은 무엇입니까
- 5. JQuery
- 6. jquery
- 7. Jquery
- 8. jquery
- 9. JQuery
- 10. jquery
- 11. . jquery
- 12. Jquery
- 13. jquery
- 14. jQuery
- 15. jquery
- 16. jquery
- 17. JQUERY
- 18. JQUERY
- 19. Jquery
- 20. jQuery
- 21. jQuery :
- 22. jquery
- 23. jQuery 코드에서 jQuery 플러그인 만들기
- 24. jQuery 모바일 및 일반 jQuery
- 25. jquery :: ajaxStop()와 jquery :: ajaxComplete()
- 26. jQuery Mobile은 원본 jQuery 또는 jQuery UI의 간단한 버전입니까?
- 27. jQuery + jQuery 양식 제출 플러그인 + jQuery 유효성 검사 플러그인
- 28. Jquery 플러그인 확장 http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- 29. jQuery TinyMCE 및 jQuery RSV는 어떻게 작동합니까?
- 30. JQuery UI 자동 완성이 JQuery 1.5.1에서 깨졌습니다.
그래서 당신이 마지막 행 또는 선택한 행을 제거/복사 할 : 여기
는 구현입니까? 이러한 작업을 위해 어떻게 행을 선택할 수 있습니까? –격자에서 2 개의 항목을 확인하고 복사를 누르면 선택한 행이 복제되고 행 아래에 추가되어야합니다. 선택된 행을 삭제해야합니다. 라이브 데모 용 – Ravi