在显示表时，使用Javascript或jquery向特定列添加复选框_Javascript_Jquery_User Interface_Checkbox_Hover

在显示表时，使用Javascript或jquery向特定列添加复选框

javascript jquery user-interface checkbox

在显示表时，使用Javascript或jquery向特定列添加复选框,javascript,jquery,user-interface,checkbox,hover,Javascript,Jquery,User Interface,Checkbox,Hover,我在如下表中显示数据： name country place number ashwin India delhi 123 sita India Ajmer 456 等等我想在一列中添加悬停复选框，并允许用户为该列选择多个值。例如，用户可以选择delhi和ajmer，或者只选择delhi 请帮助编写一些jquery或javascript代码？试试这个- <!DOCTYPE html> <head

我在如下表中显示数据：

name    country    place      number
ashwin   India      delhi      123
sita     India      Ajmer      456

等等

我想在一列中添加悬停复选框，并允许用户为该列选择多个值。例如，用户可以选择delhi和ajmer，或者只选择delhi

请帮助编写一些jquery或javascript代码？

试试这个-

    <!DOCTYPE html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#one").mouseover(function(){
            $("#chk1").show();
        });

        $("#two").mouseover(function(){
            $("#chk2").show();
        });

        $("#one").mouseout(function(){
            if (document.getElementById('chk1').checked) {
           $("#chk1").show();
            }
            else{
            $("#chk1").hide();
        }
        });

        $("#two").mouseout(function(){
            if (document.getElementById('chk2').checked) {
           $("#chk2").show();
            }
            else{
            $("#chk2").hide();
        }
        });


    });
</script>
</head>


<table border="1">
<tr>
    <th>name</th>
    <th>country</th>
    <th>place</th>
    <th>number</th>
    <th>check</th>
</tr>
<tr id="one"> <!--put id as primary number from db -->
    <td > ashwin </td> 
    <td> India </td>
    <td> delhi </td>
    <td> 123</td>
    <td><input type="checkbox" id="chk1" style="display:none"></td> <!--here but use tr id_chk -->
</tr>
<tr id="two"> <!--put id as primary number from db -->
    <td > sita </td>
    <td> India </td>
    <td> Ajmer </td>
    <td> 456</td>
    <td> <input type="checkbox" id="chk2" style="display:none"></td><!--here but use tr id_chk -->
</tr>
</table>
</html>

HTML-

    <table border="1" id="demo">
<tr>
    <th>name</th>
    <th>country</th>
    <th>place</th>
    <th>number</th>
    <th>check</th>
</tr>
<tr> 
    <td > ashwin </td> 
    <td> India </td>
    <td> delhi </td>
    <td> 123</td>
    <td><input type="checkbox" id="chk1" style="display:none"></td> 
</tr>
<tr> 
    <td > sita </td>
    <td> India </td>
    <td> Ajmer </td>
    <td> 456</td>
    <td> <input type="checkbox" id="chk2" style="display:none"></td>
</tr>
<tr > 
    <td > sita </td>
    <td> India </td>
    <td> Ajmer </td>
    <td> 456</td>
    <td> <input type="checkbox" id="chk2" style="display:none"></td>
</tr>
</table>

jsiddle link-

欢迎来到StackOverflow。请访问stackoverflow.com/help/how-to-askHello，欢迎来到stackoverflow。请花些时间阅读帮助页面，特别是命名和的部分。更重要的是，请阅读。您可能还想了解。我想应用复选框或选择特定列的值，例如名称。然后，如果我选择这两个名称，我希望它们的值在后端进行进一步处理。另一件重要的事情是，表中的行数取决于从数据库返回的行，它是动态的，因此如何使其成为动态的。谢谢您的帮助。

$(document).ready(function(){
        $("#demo tr").mouseover(function() {

               $(this).find("input[type='checkbox']").show();

        });

         $("#demo tr").mouseout(function(){
                var checkbox = $(this).find("input[type='checkbox']");
            if (!checkbox.is(':checked')) {
               $(this).find("input[type='checkbox']").hide();
            }
        });
});