javascript - 使用 jquery 将 tr 元素添加到另一个表中

标签 javascript php jquery html angularjs

如何使用 jquery 将表行中的某些元素移动到另一个表中,我不确定“追加”,因为它也需要 session ,这是最好的方法,使用 ajax、json、php (cart) 或也许有 Angular ,任何建议将不胜感激

就像当我点击第一行的添加时,它会显示如下

fiddle >>

<div class="part-container">

<div class="part-right">
 <div class="table-responsive" id="right-table">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Part Number</th>
                  <th>Desc</th>
                  <th>Het</th>
                  <th>Cart</th>
                </tr>
              </thead>
              <tbody>
                <tr class="part_number" rel="part_number_9505092011120026">
                  <td>1,001</td>
                  <td>Lorem</td>
                  <td>ipsum</td>
                    <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,002</td>
                  <td>amet</td>
                  <td>consectetur</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,003</td>
                  <td>Integer</td>
                  <td>nec</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,003</td>
                  <td>libero</td>
                  <td>Sed</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,004</td>
                  <td>dapibus</td>
                  <td>diam</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number" rel="part_number_1905092011120046">
                  <td>1,005</td>
                  <td>Nulla</td>
                  <td>quis</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,006</td>
                  <td>nibh</td>
                  <td>elementum</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,007</td>
                  <td>sagittis</td>
                  <td>ipsum</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number" rel="part_number_5305092011120107">
                  <td >1,008</td>
                  <td>Fusce</td>
                  <td>nec</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,009</td>
                  <td>augue</td>
                  <td>semper</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,010</td>
                  <td>massa</td>
                  <td>Vestibulum</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,011</td>
                  <td>eget</td>
                  <td>nulla</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number" rel="part_number_1805092011120139">
                  <td>1,012</td>
                  <td>taciti</td>
                  <td>sociosqu</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,013</td>
                  <td>torquent</td>
                  <td>per</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number" rel="part_number_9805092011120157">
                  <td>1,014</td>
                  <td>per</td>
                  <td>inceptos</td>
                  <td><a href="#">Add</a></td>
                </tr>
                <tr class="part_number">
                  <td>1,015</td>
                  <td>sodales</td>
                  <td>ligula</td>
                  <td><a href="#">Add</a></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
       </div>
<div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>No</th>
                  <th>Part Number</th>
                  <th>Desc</th>
                  <th>Qty / Unit</th>
                  <th>Desire QTY</th>
                  <th>Het ( $ )</th>
                  <th>Estimate Total ( $ )</th>
                  <th>Delete </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Lorem</td>
                  <td>ipsum</td>
                  <td>1</td>
                  <td>JS Spinner ( - ) 3 ( + )</td>
                  <td>$12</td>
                  <td>$36</td>
                    <td><a href="#">Delete</a></td>
                </tr>
              </tbody>
            </table>
          </div>

CSS : 

.part-container { 
    width: 100%; 
    display: block;  
    height: 551px;
}
.part-right { 
    width: 100%; 
    float: left;  
}
.red {
    background: red;
}

最佳答案

移动一行非常容易。在您点击Add链接时,您也需要创建所点击行的副本。

var tr = $(this).closest('tr').clone();

这会复制单击的行,并通过下一行将其移动到第二个表。

$('.tbl-two').append(tr);

<强> Example

对于 session ,您至少需要将部件 ID 存储到变量中。如果 session 中不存在该变量,则创建它;如果存在,则将部件 ID 附加到变量末尾,并使用分隔符(例如 ,)。

但是,创建“购物车”表比复制行要复杂一些。

关于javascript - 使用 jquery 将 tr 元素添加到另一个表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28567307/

相关文章:

javascript - 具有相同id的多个div中的Ajax json值

jquery - 动态工具提示

加载后Javascript设置输入值

javascript - 切换隐藏/显示不适用于子级 div

Windows 中的 PHP 5.5.21/Apache 2.4/MySQL 5.6.22 出现 PHP PDO "could not find driver"错误

php - 坚持冲刷后 Doctrine 关系消失

asp.net - JSON 调用 + .net 在内置 Web 服务器上以 Debug模式工作,但不能直接转到虚拟目录

javascript - 在不使用 ng-click 的情况下使用 Ionic + Cordova + AngularJS 显示联系人列表

javascript - 我的方法总是提醒对象 [Object object]

php - MAMP 和 DigitalOcean LAMP Ubuntu 14.04 服务器之间的区别弄乱了 Joomla 自定义表单字段