Javascript jQuery根据输入添加或删除表行

对不起，如果这太基本了

如果当前行数不足，我将尝试向表中添加行 少于用户的需求。 同时，我需要删除 如果当前行数超过用户需要，则增加行数。 我的代码正在运行，但我认为它没有多大意义。所以我想知道是否有人可以纠正我的错误，使我的代码更合理。我试图使用两个索引来控制这个添加或删除活动。一个索引检查当前存在的元素并获得用户新输入之间的差异。然后执行添加或删除动作。但我没能做到这一点

此外，是否可以在不更改第一个表格行的形状的情况下调整添加的表格的宽度？谢谢你的帮助！这是一本书

HTML JS

---

在这些情况下，jQuery表现出色，让我们使用各种选择器。 首先，您需要分离表格thead和tbody的标题和正文。 未测试的代码

function refresh(new_count) {
//how many applications we have drawed now ?
var old_count = parseInt($('tbody').children().count());
//the difference, we need to add or remove ?
var rows_difference = parseInt(new_count) - old_count;
//if we have rows to add
if (rows_difference > 0)
{
    //$('tbody').append() or prepend() new empty rows based on your pattern with a loop
}
else if (rows_difference < 0)//we need to remove rows ..
{
    var index_start = old_count - rows_difference;//for the LAST X rows
    $('tr:gt('+index_start+')').remove();
}
}

---

在这些情况下，jQuery表现出色，让我们使用各种选择器。 首先，您需要分离表格thead和tbody的标题和正文。 未测试的代码

function refresh(new_count) {
//how many applications we have drawed now ?
var old_count = parseInt($('tbody').children().count());
//the difference, we need to add or remove ?
var rows_difference = parseInt(new_count) - old_count;
//if we have rows to add
if (rows_difference > 0)
{
    //$('tbody').append() or prepend() new empty rows based on your pattern with a loop
}
else if (rows_difference < 0)//we need to remove rows ..
{
    var index_start = old_count - rows_difference;//for the LAST X rows
    $('tr:gt('+index_start+')').remove();
}
}

---

我采纳了@B3aT提出的想法，经过编辑和充实，使其在以下网站上可用：

emptyRow函数如此长的原因是我想使列的数量易于操作。每个列都单独追加，因此更改默认模式很简单

在html中，我必须添加thead和tbody标记，如@B3aT的回答中所述。thead包括前两行，因为第1行是选择框，第2行是表的实际标题。t车身开始时是空的

---

至于更改单个行的样式（如调整列宽），最好不要使用表。类似表格的行为可以简单到在列样式中使用float:left，确保在每行末尾放置一个带有clear:both的div。

我接受了@B3aT提出的想法，经过编辑和充实，使其在以下位置可用：

emptyRow函数如此长的原因是我想使列的数量易于操作。每个列都单独追加，因此更改默认模式很简单

在html中，我必须添加thead和tbody标记，如@B3aT的回答中所述。thead包括前两行，因为第1行是选择框，第2行是表的实际标题。t车身开始时是空的

---

至于更改单个行的样式（如调整列宽），最好不要使用表。类似于表格的行为可以像在列样式中使用float:left一样简单，确保在每行末尾放置一个带有clear:both的div。

很高兴我可以帮助@tao.honglad我可以帮助@tao.hong感谢您的解决方案。我能知道你为什么要把尸体和尸体分开吗？还有，有没有一种方法可以定义表中不同行的宽度？我这样做只是为了实现@B3aT的解决方案。不用它，您也可以轻松查询表行。谢谢您的解决方案。我能知道你为什么要把尸体和尸体分开吗？还有，有没有一种方法可以定义表中不同行的宽度？我这样做只是为了实现@B3aT的解决方案。如果没有它，您也可以轻松地查询表行。

function refresh(new_count) {
//how many applications we have drawed now ?
var old_count = parseInt($('tbody').children().count());
//the difference, we need to add or remove ?
var rows_difference = parseInt(new_count) - old_count;
//if we have rows to add
if (rows_difference > 0)
{
    //$('tbody').append() or prepend() new empty rows based on your pattern with a loop
}
else if (rows_difference < 0)//we need to remove rows ..
{
    var index_start = old_count - rows_difference;//for the LAST X rows
    $('tr:gt('+index_start+')').remove();
}
}

var row_i = 0;

function emptyRow() {
  row_i++;
  this.obj = $("<tr></tr>");
  this.obj.append('<td><input type="text" size="5" value="' + row_i + '"/></td>');
  this.obj.append('<td><input type="text" size="5" name="mm' + row_i + '" id="id_mm' + row_i + '""/></td>');
  this.obj.append('<td><input type="text" size="5" name="dd' + row_i + '" id="id_dd' + row_i + '""/></td>');
  this.obj.append('<td><input type="text" size="5" name="ma' + row_i + '" id="id_ma' + row_i + '""/></td>');
  this.obj.append('<td><input type="text" size="5" name="sr' + row_i + '" id="id_sr' + row_i + '" value="0""/></td>');
}

function refresh(new_count) {
  if(new_count > 0) {
    $("#noa_header").show();
  }
  else {
    $("#noa_header").hide();
  }
  var old_count = parseInt($('tbody').children().length);

  var rows_difference = parseInt(new_count) - old_count;

  if (rows_difference > 0)
  {
     for(var i = 0; i < rows_difference; i++)
        $('tbody').append((new emptyRow()).obj);
  }
  else if (rows_difference < 0)//we need to remove rows ..
  {
     var index_start = old_count + rows_difference + 1;          
     $('tr:gt('+index_start+')').remove();
     row_i += rows_difference;
  }
}

$(document).ready(function () {
    $('#id_noa').change(function () {
        refresh( $(this).val() );
    })
});