选择动态创建的表,onclick事件的突出显示行

时间:2015-12-29 13:00:18

标签: javascript html

我根据数据长度创建了一个生成动态表的网页。现在我想获取所选表tr的值并将其附加到另一个表中。

function setItemForSale(itemForSale, type,xml)
{

        var itemForSaleTable = document.getElementById("custorder1");
        var itemForSaleTableHead = document.getElementById("head1");
        var itemForSaleTableBody = document.createElement("tbody");

        itemForSaleTableBody.appendChild(itemForSaleTableHead);

        $('#custorder1 tr').has('td').remove();            

        for(var i=0; i< itemForSale.length; i++)
        {
            var row = document.createElement("tr");
            itemForSaleTable.insertRow(-1);

                var obj             = itemForSale[i];
                var vitemno         = obj["itemNo"];
                var vname           = obj["name"];
                var valias          = obj["alias"];
                var vbrand          = obj["brand"];
                var vdescription    = obj["description"];

                var cell       = document.createElement("td");
                var cellText   = document.createTextNode(vitemno);
                cell.appendChild(cellText);
                row.appendChild(cell);

                cell       = document.createElement("td");              
                cellText   = document.createTextNode(vname);
                cell.appendChild(cellText);
                row.appendChild(cell);

                cell       = document.createElement("td");              
                cellText   = document.createTextNode(valias);
                cell.appendChild(cellText);
                row.appendChild(cell);

                cell       = document.createElement("td");              
                cellText   = document.createTextNode(vbrand);
                cell.appendChild(cellText);
                row.appendChild(cell);

                cell       = document.createElement("td");              
                cellText   = document.createTextNode(vdescription);
                cell.appendChild(cellText);
                row.appendChild(cell);

                itemForSaleTableBody.appendChild(row);
}
itemForSaleTable.appendChild(itemForSaleTableBody);
itemForSaleTable.setAttribute("border", "2");       
}

//用于创建表框架的代码

 <table class="CSSTableGenerator" id="custorder1" >
               <thead>
                    <tr id="head1">
                        <th>
                            Item No
                        </th>
                        <th>
                            Name
                        </th>
                        <th>
                            Alias
                        </th>
                        <th>
                            Brand
                        </th>
                        <th>
                            Description
                        </th>
                    </tr>
                   </thead>
                   <tbody>
                   </tbody>
                </table>

//我想选择单个单元格数据,以便我可以使用它来获取数据。如何选择所选行中的任何单元格数据,我不知道该怎么做!请帮帮我

1 个答案:

答案 0 :(得分:0)

您可以在tr上绑定点击处理程序,然后使用.appendTo()将所选行移动到另一个表格。

$('#custorder1').on('click', 'tr', function(){
    $(this).appendTo('#anotherTableId')
});

&#13;
&#13;
$('#custorder1').on('click', 'tr', function() {
  $(this).appendTo('#anotherTableId')
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="CSSTableGenerator" id="custorder1">
  <thead>
    <tr>
      <th>
        Item No
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
  </tbody>
</table>

Another table

<table class="CSSTableGenerator" id="anotherTableId">

</table>
&#13;
&#13;
&#13;