jQuery根据输入添加或删除表行 [英] jQuery add or remove table row based on inputs

问题描述

对不起，如果这太基础了.

1. 如果当前行数是 少于用户的需求.
2. 同时，我需要删除 如果当前行数超出用户需求，则增加行数.

我的代码正在运行，但是我认为这没有任何意义.所以我想知道是否有人可以纠正我的错误并使我的代码更合理. (我试图使用两个索引来控制此添加或删除活动.一个索引检查当前存在的元素，并获取用户新输入之间的差异.然后执行添加或删除动作.但是我无法做到这一点.)

此外，可以在不更改shape of the first table row?的情况下调整添加的<td>的宽度.感谢您的帮助！这是演示.

HTML

<form method="post" id="form1" action=index.html>
    <table class="tab tab_Application" border="0">
        <tr>
            <th>
                <label for="id_noa">Number of Applications:</label>
            </th>
            <td>
                <select name="noa" id="id_noa">
                    <option value="">Make a selection</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </td>
        </tr>
        <tr id='noa_header' style="display:none">
            <th>App#</th>
            <th>Month</th>
            <th>Day</th>
            <th>Mass Applied (kg/hA)</th>
            <th>Slow Release (1/day)</th>
        </tr>
    </table>
</form>

JS

$(document).ready(function () {
    var i = 1
    $('#id_noa').change(function () {
        var total = $(this).val()
        $('#noa_header').show()

    //I was trying to use two indices to control this add or remove activity. One index check the current existed elements and get the difference between user's new input. Then do the add or remove movements. But I failed to do this.

        while (i <= total) {
            $('.tab_Application').append('<tr class="tab_noa1"><td><input type="text" size="5" value="' + i + '"/></td><td><input type="text" size="5" name="mm' + i + '" id="id_mm' + i + '""/></td><td><input type="text" size="5" name="dd' + i + '" id="id_dd' + i + '""/></td><td><input type="text" size="5" name="ma' + i + '" id="id_ma' + i + '""/></td><td><input type="text" size="5" name="sr' + i + '" id="id_sr' + i + '" value="0""/></td></tr>');
            i = i + 1;
        }
        while (i-1 > total) {
            $(".tab_Application tr:last").remove();
            i=i-1
        }

        $('</table>').appendTo('.tab_Application');

    })
});

解决方案

我接受了@ B3aT提出的想法，对其进行了编辑和充实，以使其成为现实(可在

emptyRow函数之所以这么长是因为我想使列数易于操作.每列都单独附加，因此更改默认模式很简单.

在html中，我必须按照@ B3aT的答案中所述添加thead和tbody标记. Thead包括前两行，因为第1行是选择框，第2行是表的实际标题. tbody空无一物.

就更改单个行的样式(例如调整列宽)而言，最好不要使用表格.类似于表格的行为可以像在列样式中使用float:left一样简单，请确保在每行的末尾放置一个clear:both的div.

Sorry, if this is too basic.

1. I am trying to add rows to a table if current number of rows are less than a user's demand.
2. At the same time, I need to delete the extra rows if current number of rows are more than a user's need.

My code is working, but I think it does not make a lot of sense. So I am wondering if anyone could correct my mistakes and make my code more reasonable. (I was trying to use two indices to control this add or remove activity. One index check the current existed elements and get the difference between user's new input. Then do the add or remove movements. But I failed to do this.)

In addition, is it possible to adjust the width of added <td> without changing the shape of the first table row? Thanks for your help! Here is a demo.

HTML

<form method="post" id="form1" action=index.html>
    <table class="tab tab_Application" border="0">
        <tr>
            <th>
                <label for="id_noa">Number of Applications:</label>
            </th>
            <td>
                <select name="noa" id="id_noa">
                    <option value="">Make a selection</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </td>
        </tr>
        <tr id='noa_header' style="display:none">
            <th>App#</th>
            <th>Month</th>
            <th>Day</th>
            <th>Mass Applied (kg/hA)</th>
            <th>Slow Release (1/day)</th>
        </tr>
    </table>
</form>

JS

$(document).ready(function () {
    var i = 1
    $('#id_noa').change(function () {
        var total = $(this).val()
        $('#noa_header').show()

    //I was trying to use two indices to control this add or remove activity. One index check the current existed elements and get the difference between user's new input. Then do the add or remove movements. But I failed to do this.

        while (i <= total) {
            $('.tab_Application').append('<tr class="tab_noa1"><td><input type="text" size="5" value="' + i + '"/></td><td><input type="text" size="5" name="mm' + i + '" id="id_mm' + i + '""/></td><td><input type="text" size="5" name="dd' + i + '" id="id_dd' + i + '""/></td><td><input type="text" size="5" name="ma' + i + '" id="id_ma' + i + '""/></td><td><input type="text" size="5" name="sr' + i + '" id="id_sr' + i + '" value="0""/></td></tr>');
            i = i + 1;
        }
        while (i-1 > total) {
            $(".tab_Application tr:last").remove();
            i=i-1
        }

        $('</table>').appendTo('.tab_Application');

    })
});

解决方案

I took the ideas presented by @B3aT, edited, and fleshed out to make this (available at my fork of OP's jsfiddle:

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() );
    })
});

The reason the emptyRow function is so long is that I wanted to make the number of columns easy to manipulate. Each column is appended individually, so changing the default pattern is simple.

In the html, I had to add the thead and tbody tags as described in @B3aT's answer. The thead includes the first two rows, because row 1 is the select box and row 2 is the actual header for the table. The tbody is empty to start.

As far as changing styles for individual rows (like adjusting column width), you'd be better off not using a table. Table-like behavior can be as simple as using float:left in your column style, making sure to place a div with clear:both at the end of each row.

这篇关于jQuery根据输入添加或删除表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！