2016-01-15 3 views
1

Мне нужна помощь, ребята, я хочу знать, как перенести значение строки таблицы в другую строку таблицы, используя onclick, уже знаете, как получить значение с помощью onclick, но не знаете, как передать значения в таблицупереносить значения таблиц в другую таблицу, используя onclick

<html> 

    <body> 
    <table class='list'> 
    <thead> 
    <tr> 
     <th class='idno'>ID No.</th> 
     <th class='itemn'>Item</th> 
     <th class='quant'>Quantity</th> 

    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>Chocolate</td> 
     <td>99</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Bread</td> 
     <td>99</td> 
    </tr> 
    </tbody> 
    </table> 

    <script> 
     var table = document.getElementsByTagName("table")[0]; 
     var tbody = table.getElementsByTagName("tbody")[0]; 
     tbody.onclick = function (e) { 
    e = e || window.event; 
    var data = []; 
    var target = e.srcElement || e.target; 
    while (target && target.nodeName !== "TR") { 
    target = target.parentNode; 
    } 
    if (target) { 
    var cells = target.getElementsByTagName("td"); 
    for (var i = 0; i < cells.length; i++) { 
     data.push(cells[i].innerHTML); 
    } 
    } 
    alert(data); 
    }; 
    </script> 
    </body> 
    </html> 

ответ

0

Вам нужно создать несколько узлов. Сначала создайте <tr>. Затем закодируйте следующее: создайте <td>, затем текстовый узел из данных, которые вы уже собрали, добавьте текст в <td>, затем <td> в <tr> и повторите цикл. Наконец добавьте <tr> к телу таблицы. Выполните приведенный ниже фрагмент кода.

<html> 
 

 
    <body> 
 
    <table class='list'> 
 
    <thead> 
 
    <tr> 
 
     <th class='idno'>ID No.</th> 
 
     <th class='itemn'>Item</th> 
 
     <th class='quant'>Quantity</th> 
 

 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Chocolate</td> 
 
     <td>99</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Bread</td> 
 
     <td>99</td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 

 
     <br><br> 
 
     MY NEW TABLE 
 
     <table class='list'> 
 
    <thead> 
 
    <tr> 
 
     <th class='idno'>ID No.</th> 
 
     <th class='itemn'>Item</th> 
 
     <th class='quant'>Quantity</th> 
 

 
    </tr> 
 
    </thead> 
 
    <tbody id='myNewTableBody'></tbody> 
 
    </table> 
 
    <script> 
 
     var table = document.getElementsByTagName("table")[0]; 
 
     var tbody = table.getElementsByTagName("tbody")[0]; 
 
     tbody.onclick = function (e) { 
 
      e = e || window.event; 
 
      var data = []; 
 
      var target = e.srcElement || e.target; 
 
      while (target && target.nodeName !== "TR") { 
 
       target = target.parentNode; 
 
      } 
 
      if (target) { 
 
       var cells = target.getElementsByTagName("td"); 
 
       for (var i = 0; i < cells.length; i++) { 
 
        data.push(cells[i].innerHTML); 
 
       } 
 
      } 
 
      var trnode = document.createElement("tr"); 
 
      
 
      for(var i = 0; i < data.length; i++){ 
 
       var tdnode = document.createElement("td"); 
 
       var textnode = document.createTextNode(data[i]); 
 
       tdnode.appendChild(textnode); 
 
       trnode.appendChild(tdnode); 
 
      } 
 
      
 
      document.getElementById("myNewTableBody").appendChild(trnode); 
 
      alert(data); 
 
    }; 
 
    </script> 
 
    </body> 
 
    </html>

0

Я изменил код, смотрите в эту

var table = document.getElementsByTagName("table")[0]; 
 
     var tbody = table.getElementsByTagName("tbody")[0]; 
 
\t \t 
 
\t \t // get other table you want to insert in 
 
\t \t var t2 =document.getElementById("othertable"); 
 
\t \t 
 
     tbody.onclick = function (e) { 
 
    e = e || window.event; 
 
    var data = []; 
 
    var target = e.srcElement || e.target; 
 
    while (target && target.nodeName !== "TR") { 
 
    target = target.parentNode; 
 
    } 
 
    if (target) { 
 
    var cells = target.getElementsByTagName("td"); 
 
\t 
 
\t //insert at zero index 
 
\t var tr = t2.insertRow(0) 
 
\t 
 
    for (var i = 0; i < cells.length; i++) { 
 
     data.push(cells[i].innerHTML); 
 
\t \t 
 

 
\t \t var cell = tr.insertCell(i); 
 
\t \t cell.innerHTML = cells[i].innerHTML; 
 
    } 
 
    } 
 
    alert(data); 
 
    };
<table class='list'> 
 
    <thead> 
 
    <tr> 
 
     <th class='idno'>ID No.</th> 
 
     <th class='itemn'>Item</th> 
 
     <th class='quant'>Quantity</th> 
 

 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Chocolate</td> 
 
     <td>99</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Bread</td> 
 
     <td>99</td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
\t <hr/> 
 
<table id="othertable"></table> 
 
    
 
    
 

Смежные вопросы