table表单多选js

PROMULGATOR

浮夸

山东省

← jquery实现网页tab栏切换

→ 网红时钟转盘

相关代码

table表单多选js

查找table指定数据

js表单验证与提交

原生js表单验证代码

js实现table表格表头固定

原生js实现分页

table全选某列

Html

Css

Js

table,tr,td {
	border:1px solid #666
}
td {
	padding:10px;
}

var temp_str = '';
var chose_arr = new Array();

function get_true_length(arr) {
    var num = 0
    for (val in arr) {
        if (val != "false") {
            num++
        }
    }
    return num
}

function chose(e) {
    if (temp_str == '') {
        var str = $(e).attr('id');
        temp_str = str.substr(0, 7)
        chose_one(e);
    } else {
        var str = $(e).attr('id');
        var sub_str = str.substr(0, 7)
        if (sub_str == temp_str) {
            chose_one(e);
        } else {
            $("td[id^=" + temp_str + "]").each(function(ee) {
                chose_arr = new Array()
                $("#caozuo_date").html('');
                $(this).attr('style', "border: 1px solid #ABABAB;")
            })
            temp_str = sub_str
            chose_one(e);
        }
    }
}

function chose_one(e) {
    var date = $(e).attr('date');
    var str = $(e).attr('id');
    var ind = str.split('_')
    if ($(e).css('border-width') == "3px") {
        // chose_arr.remove(ind[2]);    // 删除元素
        chose_arr.splice(ind[2], 1); // 删除元素
        $(e).attr('style', "border: 1px solid #ABABAB;")
    } else {
        chose_arr[ind[2]] = date;
        $(e).attr('style', "border: 3px solid #93CED3;")
    }
    // console.log(chose_arr)
    // console.log(get_true_length(chose_arr))
    var old_str = $("#caozuo_date").html()
    var date_all = ''
    if (old_str == '') {
        date_all = date
    } else {
        var old_arr = old_str.split('~')
        if (!(typeof(old_arr[1]) == "undefined")) {
            if (date > old_arr[1]) {
                date_all = old_arr[0] + '~' + date
            } else if (date < old_arr[0]) {
                date_all = date + '~' + old_arr[1]
            } else {
                date_all = old_str
            }
        } else {
            old_str = old_arr[0]
            if (old_str < date) {
                date_all = old_str + '~' + date
            } else {
                date_all = date + '~' + old_str
            }
        }

}

$("#caozuo_date").html(date_all);
    $("#caozuo_days").html(get_true_length(chose_arr));
    $('#chose').show();

}
$(function() {
    $("input").attr("disabled", "true")
    $('td').each(function() {
        $(this).click(function() {
            chose(this)
        })
    })
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

table表单多选js

代码描述：table表单多选js

选择后可以显示选择的哪些天数 , 有几天时间 , 可以取消选择

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>table表单多选js-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号