Jquery 实现html table 行 Tr 的复制 . table追加消除

最新推荐文章于 2023-07-21 14:52:11 发布

java_pp

最新推荐文章于 2023-07-21 14:52:11 发布

阅读量2.9k

点赞数

本文链接：https://blog.youkuaiyun.com/java_pp/article/details/8165628

版权

这篇博客介绍了如何使用Jquery实现HTML表格行的复制和追加操作。提供了两个函数`addTimeBtn`用于添加行，一个是直接创建新行，另一个是通过克隆第一行实现。同时，还展示了删除行的函数`delTimeBtn`以及获取表格行数量的方法。示例中包含HTML结构和实际的Jquery代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

// 「追加」ボタンを押下する
function addTimeBtn(obj) {
  var $tr = $("<tr>"+
  "<td style='border:0px;'>"+
   "<select>"+
    "<option></option>"+
    "<option value='1'>1</option>"+
   "</select>"+
   " 時 "+
   "<select>"+
    "<option></option>"+
    "<option value='1'>1</option>"+
   "</select>"+
   " 分"+
  "</td>"+
  "<td style='border:0px;'>"+
   "<a href='javascript:void(0);' οnclick='delTimeBtn(this);'><img src='cmn_images/btn_delete.gif' alt='削除'></a>"+
  "</td>"+
  +"</tr>");
  $("#jikanTable").append($tr);
}

// 「追加」ボタンを押下する
function addTimeBtn(obj) {
  var tr = $("#jikanTable tr").eq(0).clone();
  tr.appendTo("#jikanTable");
}
// 「削除」ボタンを押下する
function delTimeBtn(obj) {
  var trNum = $("#jikanTable tr").length;
  if(trNum > 1){
   $(obj).parent().parent().remove();
  }
}

2--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------