Question

这个javascript我有3个问题。

如果已限制，用户无法添加更多项目。
示例最大项目3，值项目是ab，bc，cd，如果使用javascript我怎么能取值（毕竟完成用户将按提交然后表中的所有数据将被发布（我不能从javascript获取数据）））？
我想要的构建是这样的：示例2项目

|总项目|名称项目|删除|

| 1 | ABC |删除（按钮）|

| 2 | CDE |删除（按钮）|

这是html代码，示例max item是6

<table border="0">
    <tr>
        <td>
            Title
        </td>
        <td>
            :
        </td>
        <td>
            <input type="text" name="title" value="" placeholder="Input Title">
        </td>
    </tr>
    <tr>
        <td>
            Show Item
        </td>
        <td>
            :
        </td>
        <td>
            <select name="max" id="maxitem">
                <?php
                for($i=1; $i<=6; $i++)
                {
                    echo "<option value=".$i.">".$i." Item</option>";
                }
                ?>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            Product
        </td>
        <td>
        :
        </td>
        <td>
            <input type="text" name="product" id="product" value="" placeholder="Add Product">
        </td>
        <td>
            <input type="button" id="ADD" value="Add Item">
        </td>
    </tr>
    </table>
    <table border="1" id="tblname">
        <thead>
        <tr>
            <td>
                Total Item
            </td>
            <td>
                Name Item
            </td>
            <td>
                DELETE
            </td>
        <tr>
        </thead>
        <tbody>
        <tr>
            <td>
            </td>
        </tr>
        </tbody>
    </table>
    <input type="submit" value="SUBMIT">

这是javascript代码：

$(document).ready(function(){
  var item = 1;
  $('#ADD').click(function(){
    var maxitem = parseInt($("#maxitem").val()); //from max item in html
    if($('#product').val()){  // check input product
        if( item <= maxitem )
        {
            $('#tblname tbody').append($("#tblname tbody tr:last").clone());
            $('#tblname tbody tr:last td:first').val(item);
            $('#tblname tbody tr:last td:first').html($('#product').val());
            $('#tblname tbody tr:last td:first').append("<input type='button' class='DEL' value='DELETE'>");
            var item +=1;
        }
        else
        {
             alert ("Max Limit !!!");
        }
    }else{alert('Enter Text');}
  });

  // for delete row
  $('body').on('click', 'input.DEL', function() {
    $(this).parents('tr').remove();  
  });
});

Answer 1

看看这是否是你想要做的，你的描述很难解读：

DEMO： https://jsfiddle.net/d8kpsnxx/

<table border="0">
    <tr>
        <td>Title</td>
        <td>:</td>
        <td><input type="text" name="title" value="" placeholder="Input Title"></td>
    </tr>
    <tr>
        <td>Show Item</td>
        <td>:</td>
        <td>
            <select name="max" id="maxitem">
                <option value=1>1 Item</option>
                <option value=2>2 Item</option>
                <option value=3>3 Item</option>
                <option value=4>4 Item</option>
                <option value=5>5 Item</option>
                <option value=6>6 Item</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Product</td>
        <td>:</td>
        <td><input type="text" name="product" id="product" value="" placeholder="Add Product"></td>
        <td><input type="button" id="ADD" value="Add Item"></td>
    </tr>
</table>
<table border="1" id="tblname">
    <thead>
        <tr>
            <td>
                Total Item
            </td>
            <td>
                Name Item
            </td>
            <td>
                DELETE
            </td>
        <tr>
    </thead>
    <tbody id="cracker">
    </tbody>
</table>
<input id="submitall" type="submit" value="SUBMIT">

<script>
$(document).ready(function() {
var isAllowed   =   3;
var isSet       =   0;

    $(this).on('click',"#ADD",function(e) {
        // Prevent submission
        e.preventDefault();
        // Set all the value object
        var drop    =   $("select[name=max]");
        var title   =   $("input[name=title]");
        var prod    =   $("input[name=product]");
        // Append the table
        $("#cracker").append('<tr><td>'+title.val()+': '+prod.val()+'</td><td>'+drop.val()+'</td><td><input type="submit" class="dMade" name="'+drop.val()+'" value="DELETE" /></td></tr>');
        // Clear all the values to start over
        drop.val("");
        title.val("");
        prod.val("");
        // Auto increment
        isSet++;
        // Turn off/on submit buttons
        restFormOpts();
    });

    $(this).on('click',".dMade",function(e) {
        var traversed   =   $(this).parents("tr");
        traversed.remove();
        isSet--;
        restFormOpts();
    });

    function restFormOpts()
        {
            if(isSet === isAllowed) {
                $("#ADD").attr("disabled",true);
                $("#submitall").attr("disabled",false);
            }
            else {
                $("#ADD").attr("disabled",false);
                $("#submitall").attr("disabled",true);
            }
        }
});
</script>

Answer 2

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

    $(document).ready(function(){
        var item = 1;
        $('#ADD').click(function(){
            var maxitem = parseInt($("#maxitem").val(), 10); //from max item in html
            var iCount = 0;
            if($('#product').val()){  // check input product
                if( item <= maxitem )
                {
                    iCount = $('#tblname tbody tr').length + 1;
                    szTr = "<tr><td>";
                    szTr = szTr + iCount + "</td>";
                    szTr = szTr +   "<td>" +$('#product').val() +"</td>";
                    szTr = szTr +   "<td><input type='button' class='DEL' value='DELETE'></td>";
                    szTr = szTr +   "</tr>";                     
                    $('#tblname tbody').append(szTr);
                    item = item+1;
                }
                else
                {
                    alert ("Max Limit !!!");
                }
            }else{alert('Enter Text');}
        });

        // for delete row
        $('body').on('click', 'input.DEL', function() {
            $(this).parents('tr').remove();  
        });

        $('#get_data').click(function () {
            $('#tblname tbody tr').each(function () {
                alert($(this).find('td:eq(1)').text());
            });
        });


    });
</script>
</head>
<body>
<table border="0">
    <tr>
        <td>
            Title
        </td>
        <td>
            :
        </td>
        <td>
            <input type="text" name="title" value="" placeholder="Input Title">
        </td>
    </tr>
    <tr>
        <td>
            Show Item
        </td>
        <td>
            :
        </td>
        <td>
            <select name="max" id="maxitem">

                    <option value="1">Item1</option>
               <option value="2">Item2</option>
                 <option value="3">Item3</option>
                 <option value="4">Item4</option>
                 <option value="5">Item5</option>
                 <option value="6">Item6</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            Product
        </td>
        <td>
        :
        </td>
        <td>
            <input type="text" name="product" id="product" value="" placeholder="Add Product">
        </td>
        <td>
            <input type="button" id="ADD" value="Add Item">
        </td>
    </tr>
    </table>
    <table border="1" id="tblname">
        <thead>
        <tr>
            <td>
                Total Item
            </td>
            <td>
                Name Item
            </td>
            <td>
                DELETE
            </td>
        <tr>
        </thead>
        <tbody>

        </tbody>
    </table>
     <input type="button" value="Get Data" id="get_data">
    <input type="submit" value="SUBMIT">
</body>
</html>

获取价值数据＆amp;使用javascript删除行表

2 个答案: