javascript怎么实现两个table的联动

复杂，没有现成的代码吧。可以看看datatable这个jQuery插件，可能会省点力气

解决方案 »

  1.   

    这不光是web前端页面的操作，还涉及数据的存储和服务器的交互而且，你的逻辑已经很清楚，如果将每个环节拆分开来，逐步实现也是挺容易的，要说非要详尽代码，也许具体情况具体分析。
      

  2.   

    没人弄吗？？只要简单的实现就行。。不用jquery第三方库
      

  3.   

    因为这里木有办法上传附件，所以你自己找个jquery.1.4.2.min.js的文件，跟这个文件放到同一个目录里，然后就可以用了，应该是符合你的要求的。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script src="jquery.1.4.2.min.js"></script>
    <style>
    td {padding-left:10px;font-size:14px;}
    input {font-size:12px;font-weight:bold}
    </style>
    </head>
    <body>
    <table align='center' cellpadding='0' border='0' cellspacing='1'bgcolor="#ccc" width='600px' style="margin-top:20px;">
    <tr height='40px' bgcolor="#fff"><td width='200px' align='center'>选择部门</td><td width='200px' align='center'>部门名</td><td width='200px' align='center'>操作</td></tr>
    <tr height='30px' bgcolor="#fff" id='bml_1' >
    <td><input type='checkbox' id='bmsel_1'/></td><td id='bmname_1'>部门1</td><td><input type='button' value="添加员工" id='bm_1' disabled />|<input type='button' value="删除" id='bmd_1' disabled /></td>
    </tr>
    <tr height='30px' bgcolor="#fff" id='bml_2'>
    <td><input type='checkbox' id='bmsel_2'/></td><td id='bmname_2'>部门2</td><td><input type='button' value="添加员工" id='bm_2' disabled />|<input type='button' value="删除" id='bmd_2' disabled /></td>
    </tr>
    <tr height='30px' bgcolor="#fff" id='bml_3'>
    <td><input type='checkbox' id='bmsel_3'/></td><td id='bmname_3'>部门3</td><td><input type='button' value="添加员工" id='bm_3' disabled />|<input type='button' value="删除" id='bmd_3' disabled /></td>
    </tr>
    </table>



    <table align='center' cellpadding='0' border='0' cellspacing='1'bgcolor="#ccc" width='600px' id='add_yg' style="margin-top:20px;display:none">
    <tr height='40px' bgcolor="#fff"><td align='center'>添加员工</td></tr>
    <tr height='40px' bgcolor="#fff"><td>输入员工姓名：<input type='text' id='yg_name'/><input type='hidden' id='bmid' value='0'/>&nbsp;&nbsp;&nbsp;&nbsp;<input type='button' id='addyg' value='确定'/>&nbsp;&nbsp;&nbsp;&nbsp;<span id='addmsg'></span></td></tr>
    </table>



    <table align='center' cellpadding='0' border='0' cellspacing='1'bgcolor="#ccc" width='600px' id='yuangong' style="margin-top:20px;">
    <tr height='40px' bgcolor="#fff"><td width='200px' align='center'>部门名</td><td width='200px' align='center'>员工名</td><td width='200px' align='center'>操作</td></tr>
    <tr height='30px' bgcolor="#fff" id='yg_1_1'>
    <td>部门1</td><td>员工1</td><td><input type='button' value="删除员工" id='del_1_1' disabled /></td>
    </tr>
    <tr height='30px' bgcolor="#fff" id='yg_2_1'>
    <td>部门2</td><td>员工1</td><td><input type='button' value="删除员工" id='del_2_1' disabled /></td>
    </tr>
    <tr height='30px' bgcolor="#fff" id='yg_3_1'>
    <td>部门3</td><td>员工1</td><td><input type='button' value="删除员工" id='del_3_1' disabled /></td>
    </tr>
    <tr height='30px' bgcolor="#fff" id='yg_1_2'>
    <td>部门1</td><td>员工2</td><td><input type='button' value="删除员工" id='del_1_2'disabled /></td>
    </tr>
    <tr height='30px' bgcolor="#fff" id='yg_2_2' >
    <td>部门2</td><td>员工2</td><td><input type='button' value="删除员工" id='del_2_2'disabled /></td>
    </tr>
    <tr height='30px' bgcolor="#fff" id='yg_3_2'>
    <td>部门3</td><td>员工2</td><td><input type='button' value="删除员工" id='del_3_2'disabled /></td>
    </tr>
    </table> <script>
    $(document).ready(
    function()
    {
    //选中
    $("input[id^='bmsel_']").click(
    function()
    {
    var opkey = $(this).attr('id').replace(/bmsel_/,"");
    $("tr[id^='bml_']").attr("bgcolor","#fff");
    $("tr[id^='yg_']").attr("bgcolor","#fff");
    $("input[id^='bm_']").attr("disabled",true);
    $("input[id^='bmd_']").attr("disabled",true);
    $("input[id^='del_']").attr("disabled",true);
    $("input[id^='bmsel_']").each(
    function()
    {
    if($(this).attr('id').replace(/bmsel_/,"") != opkey)
    {
    $(this).attr("checked",false);
    }
    }
    )
    if($(this).is(':checked'))
    {
    $("#bml_"+opkey).attr("bgcolor","#eee");
    $("#bm_"+opkey).attr("disabled",false);
    $("#bmd_"+opkey).attr("disabled",false);
    $("input[id^='del_"+opkey+"_']").attr("disabled",false);
    $("tr[id^='yg_"+opkey+"_']").attr("bgcolor","#eee");
    }
    else
    {
    $("#bml_"+opkey).attr("bgcolor","#fff");
    $("#bm_"+opkey).attr("disabled",true);
    $("#bmd_"+opkey).attr("disabled",true);
    $("input[id^='del_"+opkey+"_']").attr("disabled",true);
    $("tr[id^='yg_"+opkey+"_']").attr("bgcolor","#fff");
    }
    }
    );

    //添加员工 --- 打开添加员工界面
    $("input[id^='bm_']").click(
    function()
    {
    var opkey = $(this).attr("id").replace(/bm_/,"");
    $("#bmid").val(opkey);
    $("#yg_name").val("");
    $("#add_yg").show();
    }
    );

    //添加员工
    $("#addyg").click(
    function()
    {
    var bmid = $("#bmid").val();
    if(!bmid)
    {
    $("#addmsg").css('color','#ff0000').html('请先选择部门');
    setTimeout(
    function()
    {
    $("#yg_name").val('');
    $("#addmsg").html('').css('color','#000');
    $("#add_yg").hide();
    },
    1500
    );
    return;
    }
    else if($("#yg_name").val() == "")
    {
    $("#addmsg").css('color','#ff0000').html('员工姓名不能为空');
    $("#yg_name").focus();
    setTimeout(
    function()
    {
    $("#addmsg").html('').css('color','#000');
    },
    1500
    );
    return;
    }

    /**************还可在此处自行加入其它有关用户名过滤 - begin*******************/

    /**************还可在此处自行加入其它有关用户名过滤 - end*******************/


    /**************此处可加入ajax处理过程 - begin*******************/

    /**************此处可加入ajax处理过程 - end 接下来为ajax成功时操作*******************/

    var str = '<tr height="30px" bgcolor="#eee" id="yg_'+bmid+'_'+($("tr[id^='yg_"+bmid+"']").length+1)+'">';
    str += '<td>'+$("#bmname_"+bmid).html()+'</td>';
    str += '<td>'+$("#yg_name").val()+'</td>';
    str += '<td><input type="button" value="删除员工" id="del_'+bmid+'_'+($("tr[id^='yg_"+bmid+"']").length+1)+'"  /></td>';
    str += '</tr>';
    $("#yuangong").append(str);
    }
    );

    //删除部门
    $("input[id^='bmd_']").click(
    function()
    {
    if(confirm('删除部门将删除此部门下所有员工，确定删除?'))
    {
    var opkey = $(this).attr('id').replace(/bmd_/,"");

    /**************此处可加入ajax处理过程 - begin*******************/

    /**************此处可加入ajax处理过程 - end 接下来为ajax成功时操作*******************/

    $("#bml_"+opkey).remove();
    $("#bmid").val('');
    $("#yg_name").val('');
    $("tr[id^='yg_"+opkey+"']").remove();
    }
    }
    );

    //删除员工
    $("input[id^='del_']").live('click',
    function()
    {
    if(confirm('确定删除?'))
    {
    var opkey = $(this).attr('id').replace(/del_/,"");

    /**************此处可加入ajax处理过程 - begin*******************/

    /**************此处可加入ajax处理过程 - end 接下来为ajax成功时操作*******************/

    $("#yg_"+opkey).remove();
    }
    }
    );
    }
    );
    </script>
    </body>
    </html>
      

  4.   

    楼上的大神。。可不可以只用javascript做出来。。不用JQuery
      

  5.   

    原生态的js忒麻烦，懒得写，你凑合用吧，或者你按照我那个逻辑，自己翻译成原生态的js，祝你成功。
      

  6.   

    大神我是新手。。不懂JQuery谁能用JS写下。。谢谢。。跪求JS的。。
      

  7.   

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    table {
    border-collapse: collapse;
    }
    th,td {
    padding: 5px;
    text-align: center;
    }
    </style>
    <script type="text/javascript">
    var arrayDate = [ '技术部', '人力部', '销售部' ,'品管部'];
    arrayDate[0] = [ ['1','张三','25','男','无'], 
                     ['2','李四','24','男','无'],                ];
    arrayDate[1] = [ ['5','张三','25','男','无'], 
                     ['6','李四','25','男','无'],                ];
    arrayDate[2] = [ ['9','张三','25','男','无'], 
                     ['10','李四','25','男','无'],                ];
    arrayDate[3] = [ ['13','张三','25','男','无'], 
                     ['14','李四','25','男','无'],                ];
    arrayDate[4] = [ ['13','张三','25','男','无'], 
                     ['14','李四','25','男','无'],                ];
      var cur;
      window.onload= function() {    
    var tr = document.getElementsByTagName("tr");
    for ( var i = 1; i < tr.length; i++) {
    tr[i].onclick = function() {
    cur ? cur.style.backgroundColor = '' : '';
    cur ? cur.getElementsByTagName("input")[0].checked=false:'';
    checkBoxCheck(this);
    changecolor(this);
    cur = this;
        showEmp(this.id/1);     
    }
    }
    }
    function changecolor(obj) {
    obj.style.backgroundColor = "#A6FFFF";
    }
    function checkBoxCheck(obj){
    obj.getElementsByTagName("input")[0].checked=true;
    }
    function remove(){
    var table=document.getElementById("tab2");
    trs=table.getElementsByTagName("tr");
    for(var i=trs.length-1;i>0;i--){
    table.deleteRow(i);
    }
    }
    function showEmp(obj) {
    remove();
    if(arrayDate[obj]==undefined) {
    return;
    }else{
    for ( var i = 0; i < arrayDate[obj].length; i++) {
    var o = arrayDate[obj][i];
    getEmp(o);
    }
    }
    }
    function getEmp(obj){
    var tab = document.getElementById("tab2"); //获得表格
    var colsNum = tab.rows.item(0).cells.length; //表格的列数
    var num = document.getElementById("tab2").rows.length;//表格当前的行数
    var rownum = num;
    tab.insertRow(rownum);
    tab.rows[rownum].insertCell(0).innerHTML="<input type='checkbox' name='emp'/>";
    for ( var i = 0; i < obj.length; i++) {
    for ( var i =1; i <colsNum; i++) {
    tab.rows[rownum].insertCell(i);//插入列
    tab.rows[rownum].cells[i].innerHTML = obj[i-1];
    }
    }
    }
    function addPart(){
       var row=prompt("请输入部门编号与部门名称","5,开发部");
       var arr=row.split(",");
       var col1=arr[0];
       var col2=arr[1];
       var tab = document.getElementById("tab1"); 
       var tr=tab.insertRow(-1);
       tr.insertCell(0).innerHTML="<input type='checkbox' name='depart'/>";
       tr.insertCell(1).innerHTML=col1;
       tr.insertCell(2).innerHTML=col2;
       tr.id=arrayDate.length-1;
       tr.onclick = function () { //不需要函数名
       cur ? cur.style.backgroundColor = '' : '';
       cur ? cur.getElementsByTagName("input")[0].checked=false:'';
    changecolor(this);
    checkBoxCheck(this);
    cur = this;
    showEmp(this);    
        }
       var len = arrayDate.length;
       arrayDate[len]=col2;
    }
    function addEmp(){
    var arrTr=document.getElementById("tab1").getElementsByTagName("tr");
         for(var i=1;i<arrTr.length;i++){   
           if(arrTr[i].getElementsByTagName("input")[0].checked){
            var row=prompt("请输入员工编号,姓名,年龄,性别,备注","16,赵六,25,男,无");
            var arr=row.split(",");  
            var tab = document.getElementById("tab2"); 
            var tr=tab.insertRow(-1);
            tr.insertCell(0).innerHTML="<input type='checkbox' name='emp'/>";
            tr.insertCell(1).innerHTML=arr[0];
            tr.insertCell(2).innerHTML=arr[1];
            tr.insertCell(3).innerHTML=arr[2];
            tr.insertCell(4).innerHTML=arr[3];
            tr.insertCell(5).innerHTML=arr[4];
            var len = arrayDate[arrTr[i].id/1].length;
           arrayDate[arrTr[i].id/1][len]=arr;
           }
         }
    }
    function deletePart(){
    var arrTr=document.getElementById("tab1").getElementsByTagName("tr");
         for(var i=1;i<arrTr.length;i++){   
           if(arrTr[i].getElementsByTagName("input")[0].checked){
           var id=arrTr[i].id;
           var table=document.getElementById("tab2");
         trs=table.getElementsByTagName("tr"); 
           if(arrayDate[id][i]!=null||trs.length>=2){
           if(confirm("当前部门还有员工，是否删除")){
              arrayDate[id][i]=null;
              remove();   
          arrayDate[i]=arrayDate[i+1];  
          arrayDate.length--;    
          var t=arrTr[i].parentNode;
           t.removeChild(arrTr[i]);
           }else{
           return;
           }
           }else {
           if(confirm("删除该部门吗？")){    
       arrayDate[i]=arrayDate[i+1];
       arrayDate.length--; 
       var t=arrTr[i].parentNode;
       t.removeChild(arrTr[i]);  
           }else{
           return;
           }               
           }               
            }
         }
    }
    function deleteEmp(){
    var arrTr=document.getElementById("tab2").getElementsByTagName("tr");
    for(var i=1;i<arrTr.length;i++){   
         if(arrTr[i].getElementsByTagName("input")[0].checked){
              if(confirm("删除该员工吗？")){
             var t=arrTr[i].parentNode;
     t.removeChild(arrTr[i]);
              }         
         }
         }
    }

    </script>
    </head>
    <body>
    <form action="" method="POST">
    <table
    style="width: 650px; height: 500px; background-color: #ADADAD; margin-top: 50px; margin-left: 100px;">
    <tr>
    <td><table id="tab1" border="1">
    <tr style="background-color: #F1E1FF">
      <th>选择</th>
    <th>部门编号</th>
    <th>部门名称</th>
    </tr>
    <tr onclick="showEmp(this)" id='0'>
        <td><input type="checkbox" name="depart"/></td>
    <td>1</td>
    <td>技术部</td>
    </tr>
    <tr onclick="showEmp(this)" id='1'>
    <td><input type="checkbox" name="depart"/></td>
    <td>2</td>
    <td>人力部</td>
    </tr>
    <tr onclick="showEmp(this)" id='2'>
    <td><input type="checkbox" name="depart"/></td>
    <td>3</td>
    <td>销售部</td>
    </tr>
    <tr onclick="showEmp(this)" id='3'>
    <td><input type="checkbox" name="depart"/></td>
    <td>4</td>
    <td>品管部</td>
    </tr>
    </table></td>
    <td><table id="tab2" border="1">
    <tr style="background-color: #F1E1FF">
        <td>选择</td>     
    <td>编号</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
    <td>备注</td>
    </tr>
    </table></td>
    </tr>
    <span><input type="button" value="新增部门" onclick="addPart()" name="B1"/></span>
    <span><input type="button" value="新增员工" onclick="addEmp()"name="B2"/></span>
    <span><input type="button" value="删除部门" onclick="deletePart()"name="B3"/></span>
    <span><input type="button" value="删除员工" onclick="deleteEmp()"name="B3"/></span>
    </table>
    </form>
    </body>
    </html>
    求大神帮忙看下那些地方可以修改的简便点。。有些功能实现不了，比如添加员工信息，在保存员工信息的时候有问题，。。。。跪求大神帮忙