选中复选框时,JS混合输出表列

时间:2017-04-05 13:48:15

标签: javascript jquery checkbox

我是否在选中复选框时隐藏/显示表格列。这是有效的,但不是我需要它的方式。我需要在提交表单和要保留的列

后保持选中复选框

提前感谢您提供任何帮助

这是我到目前为止所得到的

i = points[0].x
j = points[0].y

2 个答案:

答案 0 :(得分:0)

<form action="#" method="post" onsubmit="return false">

尝试onsubmit="return false"

答案 1 :(得分:0)

您可以使用php来处理表单值。在页面顶部,如果通过发布表单传递值,我们将设置一些局部变量。

然后在html中我们设置了检查值,并设置了td元素的display属性,以便在页面加载时隐藏它们。

设置已检查属性

<td<?php if($col1):?> class="display:none;"<?php endif?>>Spalte1</td>

设置显示td

<?php
    // if the post var is passed set local variables of the checkbox state
    $col1 = isset($_POST['col1']) ? 'checked' : '';
    $col2 = isset($_POST['col2']) ? 'checked' : '';
    $col3 = isset($_POST['col3']) ? 'checked' : '';
?>
<!DOCTYPE html>
<html>
<head>
<title>javascript test</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
table ,td ,th{
    border-collapse: collapse;
    border: 1px solid black;        
}
td, th{
    min-width: 150px;
}
th{
    padding: 15px;
}
td{
    padding: 10px;
}
body{
    font-family: arial;
}
</style>
<script>
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
    var index = $(this).attr('name').substr(3);
    index--;
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
    $('th.' + $(this).attr('name')).toggle();
    });
});
</script>
</head>
<body>
<form action="#" method="post">
    <input type="text" name="suche">
    <input type="submit" name="senden">
</form>

<form>
    <!-- set the checkbox state if it's available -->
    <label>Spalte1<input type="checkbox" name="col1" <?=$col1?>></label>
    <label>Spalte2<input type="checkbox" name="col2" <?=$col2?>></label>
    <label>Spalte3<input type="checkbox" name="col3" <?=$col3?>></label>
</form>

<table>
    <tr>
        <th class="col1">Spalte1</th>
        <th class="col2">Spalte2</th>
        <th class="col3">Spalte3</th>
    </tr>
    <tr>
        <td<?php if($col1):?> class="display:none;"<?php endif?>>Spalte1</td>
        <td<?php if($col1):?> class="display:none;"<?php endif?>>Spalte2</td>
        <td<?php if($col1):?> class="display:none;"<?php endif?>>Spalte3</td>
    </tr>
</table>
</body>
</html>

我很遗憾没有在这台电脑上安装php,所以希望没有语法错误,因为我无法检查。

GET