javascript - 如何将单元格以记录形式获取到其他表中?

标签 javascript jquery html css

当用户单击 GET RECORD 按钮 Div 类型时,我尝试将记录的单元格(选定的用户愿望)形式从用户列表添加到最终列表表。

如何实现此功能?

$(document).ready(function() {
    $('#table-txt td').mouseover(function() {
        $(this).addClass('td-bg');
    });
    $('#table-txt td').mouseout(function() {
        $('td').removeClass('td-bg');
    });
    $('#table-txt td').click(function() {
        $('#table-txt td').removeClass('td-bg');
        $(this).toggleClass('active');
    });
    $('#getrow').click(function() {
        getrecord();
    });
});

function getrecord() {
    alert('How to get that Record to second table');
}
table,
tr,
th,
td {
    border: 1px solid #dddddd;
    border-collapse: collapse;
}
.td-bg {
    background: #006597;
    color: #fff;
    opacity: 0.7;
    cursor: pointer;
}
.block-header {
    background: #006597;
    color: #fff;
}
.block-header th {
    text-align: center;
}
.active {
    background: #006597;
    color: #fff;
}
.addrow {
    width: 10%;
    height: 125px;
    background: #006597;
    float: left;
    text-align: center;
    color: #fff;
    line-height: 100px;
    cursor: pointer;
    word-wrap: break-word;
    overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:45%; float:left;" id="table-txt">
      <tr class="block-header">
      <th colspan="4">User List</th>
      </tr>
      <tr height="25" class="block-header">
        <th width="25%">Name</th>
        <th width="25%">Age</th>
        <th width="25%">Gender</th>
        <th width="25%">Salary</th>
      </tr>
      <tr height="25">
        <td>Samudrala</td>
        <td>50</td>
        <td>M</td>
        <td>XYZ</td>
      </tr>
      <tr height="25">
        <td>Samudrala</td>
        <td>50</td>
        <td>M</td>
        <td>XYZ</td>
      </tr>
      <tr height="25">
        <td>Samudrala</td>
        <td>50</td>
        <td>M</td>
        <td>XYZ</td>
      </tr>
      </table>
	  <div class="addrow" id="getrow">GET RECORD</div>
	  <table style="width:45%; float:right;">
        <tr class="block-header">
      <th colspan="4">Final List</th>
      </tr>
      <tr height="25" class="block-header">
        <th width="25%">Name</th>
        <th width="25%">Age</th>
        <th width="25%">Gender</th>
        <th width="25%">Salary</th>
      </tr>
      <tr height="25">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
	   <tr height="25">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
	   <tr height="25">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      
      </table>

enter image description here

最佳答案

您可以使用 cellIndexparentNode.rowIndex 触发位置,并使用 map() 函数将所选值存储在数组中。

检查此片段:

$(document).ready(function() {
    $('#table-txt td').click(function() {
        $(this).addClass('td-bg');
        var arr = $(this).map(function() {
            return $(this).text();
        }).get();
        $(this).each(function() {
            var rI = this.cellIndex;
            var cI = this.parentNode.rowIndex;
            var sel = $('#table-right tr:eq(' + cI + ') td:eq(' + rI + ')');

            $('#getrow').click(function() {
                $('td').removeClass('td-bg');
                sel.html(arr);
            });
        });
    });
});
table,
tr,
th,
td {
    border: 1px solid #dddddd;
    border-collapse: collapse;
}
.td-bg {
    background: #006597;
    color: #fff;
    opacity: 0.7;
    cursor: pointer;
}
.block-header {
    background: #006597;
    color: #fff;
}
.block-header th {
    text-align: center;
}
.active {
    background: #006597;
    color: #fff;
}
.addrow {
    width: 10%;
    height: 125px;
    background: #006597;
    float: left;
    text-align: center;
    color: #fff;
    line-height: 100px;
    cursor: pointer;
    word-wrap: break-word;
    overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:45%; float:left;" id="table-txt">
    <tr class="block-header">
        <th colspan="4">User List</th>
    </tr>
    <tr height="25" class="block-header">
        <th width="25%">Name</th>
        <th width="25%">Age</th>
        <th width="25%">Gender</th>
        <th width="25%">Salary</th>
    </tr>
    <tr height="25">
        <td>Samudrala</td>
        <td>50</td>
        <td>M</td>
        <td>XYZ</td>
    </tr>
    <tr height="25">
        <td>Samudrala</td>
        <td>51</td>
        <td>F</td>
        <td>PQR</td>
    </tr>
    <tr height="25">
        <td>Samudrala</td>
        <td>52</td>
        <td>M</td>
        <td>ABC</td>
    </tr>
</table>
<div class="addrow" id="getrow">GET RECORD</div>
<table style="width:45%; float:right;" id="table-right">
    <tr class="block-header">
        <th colspan="4">Final List</th>
    </tr>
    <tr height="25" class="block-header">
        <th width="25%">Name</th>
        <th width="25%">Age</th>
        <th width="25%">Gender</th>
        <th width="25%">Salary</th>
    </tr>
    <tr height="25">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr height="25">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr height="25">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

关于javascript - 如何将单元格以记录形式获取到其他表中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39718606/

相关文章:

html - Bootstrap 网站在浏览器中看起来不错,但 div 在移动设备中无法正确呈现

javascript - 根据类型更改 jstree 节点文本颜色

jquery - GSA 搜索建议使用 ss.js 或 Ajax 自动完成 jQuery 插件

JQuery + SVG 对象 : Capture click event properly

javascript - 我想单击 div 链接并打开同一页面中其他 div 的信息

javascript - 使变量成为具有属性的对象?

javascript - Canvas 的 drawImage() 不进行子像素渲染/抗锯齿是否存在技术原因?

javascript - 使用 each() 方法动画输入代码

javascript - 正则表达式 - 最多 255 个字符,开始和结束时没有空格,

css - 将图像定位在带有 bg 图像的 div 后面