Question

我的桌子有两个问题，其中一个是我希望它只显示我点击一个按钮但是当我这样做时显示然后隐藏另一个是我如何发送一个参数基于选择此createtable函数的选项这是我的代码的一部分

<form class="form-inline" role="form">
<select multiple class="form-control" style = "width:250px"id = "theselect">
        <option selected disabled> Chose a number </option>
        <option> all </option>
        <option> 1 </option>
        <option> 2 </option>
    </select> 


    <button type="submit" id = "load" class="btn btn-default">Load</button>
</form>

<div id ="test">



</div>

<script type = "text/javascript">
$(document).ready(function(){
    $("#example").hide();
    $("#load").click(function(e){

        $("#example").show();

    });
});

function createTable(param){
   var contents = "<table id='example' class='display' cellspacing='0' width='100%' border>";
    ....
   ....
    $('#test').append(contents); append it to div 
}
$(document).ready(createTable(1));


</script>

谢谢

Answer 1

该表再次被隐藏的原因是因为您在按钮上设置了type="submit"。这意味着在click事件处理程序完成处理后，它将提交表单，这会导致页面重新加载。重新加载时，表再次隐藏。如果您将其更改为type="button"，则会阻止此操作。

您可以使用jquery获取当前选择的select值：

$('#theselect').val();

然后你可以将它传递给你的createTable函数（或者只是从函数本身中使用该代码获取值）。

此外，从JavaScript中创建标记是一个非常糟糕的主意。它将使未来的维护成为一场噩梦，如果它变得足够复杂，它可能会引发性能问题。最好将标记分开，然后根据需要通过JS显示/隐藏它。

Answer 2

试试这个：

$(document).ready(function(){
    $("#load").click(function(e){
        createTable($("#theselect").val());
        $("#example").show(); // In case of class 'display' gives it 'display:none'
    });
});

function createTable(param){
   var contents = "<table id='example' class='display' cellspacing='0' width='100%' border>";

    $('#test').append(contents);
}

#example一开始就不存在，所以我删除了$("#example").hide()。

Answer 3

看看这个例子。它获取选定的值，并将它们插入表中，然后将表格插入到dom ... HTH。

中

$(document).ready(function(){
    $("#load").click(function(e){
        var bits = $('#theselect').val();
        $("#example").hide();
        $('#test').html('');
        createTable(bits)
        $("#example").show();
    });
});

function createTable(param){
   var contents = "<table id='example' class='display' cellspacing='0' width='100%' border><tbody><tr><td>"+param+"</td></tr></tbody></table>";

    $('#test').append(contents)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select multiple class="form-control" style = "width:250px"id = "theselect">
    <option selected disabled> Chose a number </option>
    <option> all </option>
    <option> 1 </option>
    <option> 2 </option>
</select>

<button id = "load" class="btn btn-default">Load</button>

<div id ="test"></div>

用javascript创建表头

3 个答案: