Question

我有一个有多个列的表，可以通过提供no来添加行。由用户提供的。

现在我想基于emp_type字段的用户选择禁用特定字段。例如，如果用户选择永久**，那么该特定行的小时字段应该禁用，如果用户选择**合约，该行的字段应该禁用。

代码

<HTML>
<Body>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <head>
 <TABLE id="EMPTable" width="350px" border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Emp_Type</th>
        <th>Hours</th>
        <th>Days</th>
    </tr>
    <TR>
        <td><input type= "text" id = "Id1" name= "Id[]" value="1"  /> </td>
        <td><input type= "text" id="Name1" name= "Name[]" ></td>
        <td><select name="Emp_Type[]" id ="Emp_Type1"onchange="codename()" > 
            <option value="">Emp Type</option>
            <option value="Per">Permanent</option>
            <option value="Con">Contract</option>
            </select>
        </td>
        <td><input type= "text" id="Hours1" name= "Hours[]" ></td>
        <td><input type= "text" id="Days1"name= "Days[]" ></td> 
    <TR>
    </TABLE>    
     </BR>
    <label>No. of EMP <input type= "text" id="emp_cnt" name= "EMP_Count"></label>
     <button type="button" class='loadtable' > Load table</button>
     <script> 
      $(".loadtable").on('click',function(){
            var num = $("#emp_cnt").val();
            $("#EMPTable tr").slice(2).remove();
            for (var i = 2; i <= num; i++) 
            {
                var data = "<tr><td><input type='text' id='Id"+i+"' name='Id[]' value = "+i+" /><td><input type='text' id='Name"+i+"' name='Name[]' /></td><td><select id='Emp_Type"+i+"' name='Emp_Type[]'><option value='null'>Emp Type</option><option value='Per'>Permanent</option><option value='Con'>Contract</option></td><td><input type='text' id='Hours"+i+"' name='Hours[]'/></td><td><input type='text' id='Days"+i+"' name='Days[]'/></td></tr>";
                $("#EMPTable").append(data);
            }
    });  
</script> 
</BODY>
</HTML>

有人可以根据其他列选择来指导如何禁用表的列，其中行不是为表固定的。

Answer 1

我会在select元素和要启用/禁用的元素中添加一个类，以便于选择（例如，class ='emp-type'和class ='hours'）。

现在，使用jQuery将事件附加到table（或tbody）标记：

$("#EMPTable").on("change", "tr .emp-type", function(event) { 
    if ($(this).val() == 'Per') {
        $(this).closest("tr").find(".hours").prop("disabled", true);
    } else {
        $(this).closest("tr").find(".hours").prop("disabled", false);
    }
});

Answer 2

我认为以下代码可行，但您必须为每个tr

的每个td使用唯一ID

        <TABLE id="EMPTable" width="350px" border="1">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Emp_Type</th>
            <th>Hours</th>
            <th>Days</th>
        </tr>
        <TR>
            <td><input type= "text" id = "Id_1" name= "Id[]" value="1"  /> </td>
            <td><input type= "text" id="Name_1" name= "Name[]" ></td>
            <td><select name="Emp_Type[]" id ="Emp_Type_1"onchange="codename()" > 
                <option value="">Emp Type</option>
                <option value="Per">Permanent</option>
                <option value="Con">Contract</option>
                </select>
            </td>
            <td><input type= "text" id="Hours_1" name= "Hours[]" ></td>
            <td><input type= "text" id="Days_1"name= "Days[]" ></td> 
        <TR>
    </TABLE>

    $(document).on('change','select[id^="Emp_Type_"]', function(){

        var obj = $(this);

        var id = obj.attr('id');

        var indexes = id.split('_');

        var selected_val = obj.val();

        if(selected_val=='Per'){
            obj.closest('tr').find('input#Hours_'+indexes[1]).prop('disabled',true);
            obj.closest('tr').find('input#Days_'+indexes[1]).prop('disabled',false);
        }

        if(selected_val=='Con'){
            obj.closest('tr').find('input#Days_'+indexes[1]).prop('disabled',false);
            obj.closest('tr').find('input#Hours_'+indexes[1]).prop('disabled',true);
        }

    })

如何根据通过Jquery在表的其他列中插入的值来禁用/启用列

2 个答案: