JQuery實現頁面上CRUD

在資料維護的頁面或是表單的細項，

常會需要使用在同頁面做CRUD的功能，

用JQuery的方式可以很輕鬆的達到這個需求，

這邊附上一個自己寫的範例，

可以套用在許多需要這個功能的頁面上，

我使用的是JQuery-1.9.1，



js如下：

var rowObj;
 var rowObjHtml;
 var title;
 function initTr(){
     $('.rows').find('tr').each(function(){
      $(this).bind('click', function() {
    var innerV;
    $(this).closest('table').find('tbody tr td').each(function() {
     innerV=$(this).find('input').val();
     var tring='<span style="color: black;">'+innerV+'</span>';
     $(this).find('span').replaceWith(tring);
    });
    $(this).find('td').each(function(){
     innerV=$(this).find('span').html();
     $(this).find('span').replaceWith('<span style="color: red;"><u><span class="black" style="color: black;">'+innerV+'</span></u></span>');
    });
    rowObj = $(this);
   });
      $(this).hover(function() {
       $(this).css('background-color', 'yellow');
   }, function() {
    $(this).css('background-color', '');
   });
     });
 }
 function insert(table) {
  //要新增的列
  var row = $('');
  row.hover(function() {
   row.css('background-color', 'yellow');
  }, function() {
   row.css('background-color', '');
  });
  //有幾欄
  var itemCount = $('table#' + table + ' thead tr th').size();
  //每欄的request name
  $('table#' + table + ' thead tr th').each(function() {
   var rName = $(this).attr('rName');
   var td = $('');
   td.append("<input name="+rName+" type="text" value="" />");
   row.append(td);
  });
  $('table#' + table + ' tbody').append(row);
  rowObj=row;
  $('table#' + table + ' tbody').append("<input onclick="sure();" type="button" value="確定" />&nbsp;&nbsp;&nbsp;<input onclick="remove();" type="button" value="取消" />

");
  title=$('table#' + table + ' thead tr.controls');
  title.hide();
 }
 function update() {
  rowObjHtml=rowObj.html();
  var indexNum = rowObj.index();
  var tr = rowObj.closest('tr');
  tr.find('td input').each(function() {
   var rName = $(this).attr('name');
   var value = $(this).val();
   $(this).closest('td').html("<input name="+rName+" type="text" value="&quot;+value+&quot;" />");
  });
  tr.closest('table').find('tbody').append("<input onclick="sure();" type="button" value="確定" />&nbsp;&nbsp;&nbsp;<input onclick="noUpdate();" type="button" value="取消" />

");
  title=tr.closest('table').find('thead tr.controls');
  title.hide();
 }
 function remove() {
  rowObj.remove();
  $('tr.sure').remove();
  title.show();
 }
 function noUpdate(){
  title.show();
  rowObj.html(rowObjHtml);
  $('tr.sure').remove();
  var innerV;
  rowObj.closest('table').find('tbody tr td').each(function() {
   innerV = $(this).find('input').val();
   var tring = '<span style="color: black;">' + innerV + '</span>';
   $(this).find('span').replaceWith(tring);
  });
  rowObj='';
 }
 function sure() {
  var tr = $(rowObj).closest('tr');
  var column = "";
  $('tr.sure').remove();
  tr
    .find('td input')
    .each(
      function() {
       var rName = $(this).attr('Name');
       var rValue = $(this).val();
       column += ""
         + rValue
         + "<input name="+rName+" type="hidden" value="&quot;+rValue+&quot;" />

";
      });
  tr.each(function() {
   var innerV;
   $(this).closest('table').find('tbody tr td').each(function() {
    innerV = $(this).find('input').val();
    var tring = '<span style="color: black;">' + innerV + '</span>';
    $(this).find('span').replaceWith(tring);
   });
   rowObj = $(this);
  });
  tr.html(column);
  title.show();
  initTr();
 }

另外JSP頁面的呈現如下：

<table border="1" cellpadding="2" cellspacing="0" id="Table5">
  <thead>
   <tr class="controls">
    <td colspan="2" align="center">
     <input type="button" value="新增" onclick="javascript:insert('Table5');">&nbsp; 
     <input type="button" value="修改" onclick="javascript:update();">&nbsp;
     <input type="button" value="移除" onclick="javascript:remove();">&nbsp;</td>
   </tr>
   <tr>
    <th rName="item1">項目1</th>
    <th rName="item2">項目2</th>
   </tr>
  </thead>
  <tbody class="rows">
  </tbody>
 </table>

在使用上有兩個需要注意的地方：

1. 在th中的rName代表的是後台要接收的參數名稱
2. 新增insert('table id')需要一個該table id的參數

使用頁面如下：