объединения Mutiple строк в строку HML таблицы с помощью JQuery

У меня есть таблица с строками и столбцами, как этотобъединения Mutiple строк в строку HML таблицы с помощью JQuery

row1   1  2  3 
row2     4 
row3    5  6

И эта squence повторяются п числа раза, это корзина таблица для одного элемента. мне нужно отобразить ту же таблицу на следующей странице в виде резюме корзину содержимого со всеми полями для продукта на одной строке в таблице, как это:

row1   2 3 4 5 6

Таким образом, все поля должны быть на одной линии и для второго элемента в корзине на второй строке и т. д., первый столбец (td), который является img, должен быть удален, 4-й, 5-й и 6-й - это введенные текстовые поля, необходимо преобразовать в текстовую метку и на том же как другие поля элемента. Я знаю, что могу получить содержимое таблицы с чем-то вроде этого: $("#id_of_table_clone").html($("#table_cart").html()); Как мне настроить структуру строк, чтобы добавить столбцы с содержимым из строк ниже?

Добавление изображения содержимого корзины в 2 позиции, я хочу, чтобы «бизнес-обоснование», «дата начала» и «дата окончания» были заголовками столбцов и их содержимым в виде значений содержимого строки в одной строке с ролью и описанием. enter image description here

это HTML для телеги таблицы

 <table id="table_rolecart"class="table sortable" cellspacing="0" width="100%"> 
     <thead> 
     <tr> 
      <th class="sorting" style="width: 5%" scope="col"> 
      off 
      </th> 
      <th scope="col" style="width: 40%"> 
      <span class="column-sort" > 
       <a href="#" title="Sort up" class="sort-up"></a> 
       <a href="#" title="Sort down" class="sort-down"></a> 
      </span> 
      Role 
      </th> 
      <th scope="col" style="width: 55%"> 
      <span class="column-sort" > 
       <a href="#" title="Sort up" class="sort-up"></a> 
       <a href="#" title="Sort down" class="sort-down"></a> 
      </span> 
    Description 
      </th> 
     </tr> 
     </thead> 
     <tbody> 

     </tbody> 

     </table>

И я вставляет TBODY пунктов intothis таблицы как внешне из другой таблицы, как этот

$("#table_newrole img.move-row").live("click", function() { 
     var tr = $(this).closest("tr").remove().clone(); 
     tr.find("img.move-row") 
      .attr("src", "/gra/images/icons/fugue/cross-circle.png") 
      .attr("alt", "Remove"); 
     $("#table_rolecart tbody").append(tr); 
     $("#table_rolecart tbody").append('<tr style="color:black"><td colspan="3">Business Justification: &nbsp;<input type="text" name="ar_businessjust" value="" id="ar_businessjust"></td></tr><tr style="color:black"><td colspan="2">Start Date: <input type="text" style="width:70px" name="ar_startdate" value="" id="ar_startdate"> </td><td colspan="1">End Date: <input type="text" style="width:70px" name="ar_enddate" value="" id="ar_enddate"></td></tr><tr style="height:8px"></tr>'); 

    });

источник

2011-12-14 pri_dev

как один элемент визуализации? пожалуйста, также покажите html. – TheVillageIdiot

Ну попробуйте следующее, он создает таблицу, как вам требуется:

TRY ЗДЕСЬ: http://jsfiddle.net/amantur/HuQd8/

<html> 
<head> 
<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script> 
</head> 
<body> 
<table id="table_rolecart" class="table sortable" cellspacing="0" width="70%" border="1"> 
    <thead> 
    <tr> 
     <th class="sorting" style="width: 5%" scope="col">off</th> 
     <th scope="col" style="width: 40%"> 
     <span class="column-sort"> 
     <a href="#" title="Sort up" class="sort-up"></a> 
     <a href="#" title="Sort down" class="sort-down"></a> 
     </span>Role</th> 
     <th scope="col" style="width: 55%"> 
     <span class="column-sort"> 
     <a href="#" title="Sort up" class="sort-up"></a> 
     <a href="#" title="Sort down" class="sort-down"></a> 
     </span>Description</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr style="color:black"> 
    <td>X</td><td>Role 1</td><td>Description 1</td> 
    </tr> 
    <tr style="color:black"> 
    <td colspan="3">Business Justification: &nbsp;<input type="text" name="ar_businessjust" value="business 1" id="ar_businessjust"></td> 
    </tr> 
    <tr style="color:black"> 
    <td colspan="2">Start Date: <input type="text" style="width:70px" name="ar_startdate" value="sd1" id="ar_startdate"> </td> 
    <td colspan="1">End Date: <input type="text" style="width:70px" name="ar_enddate" value="ed1" id="ar_enddate"></td> 
    </tr> 
    <tr style="color:black"> 
    <td>X</td><td>Role 2</td><td>Description 2</td> 
    </tr> 
    <tr style="color:black"> 
    <td colspan="3">Business Justification: &nbsp;<input type="text" name="ar_businessjust" value="business 2" id="ar_businessjust"></td> 
    </tr> 
    <tr style="color:black"> 
    <td colspan="2">Start Date: <input type="text" style="width:70px" name="ar_startdate" value="sd2" id="ar_startdate"> </td> 
    <td colspan="1">End Date: <input type="text" style="width:70px" name="ar_enddate" value="ed2" id="ar_enddate"></td> 
    </tr> 
</tbody> 
</table> 
<table id="newTable" style="display:none"> 
    <thead><th>item name</th><th>desc</th><th>business justification</th><th>start date</th><th>end date</th></thead> 
    <tbody></tbody> 
</table> 
<p> 
    <span id="createTable">create new table</span> 
</p> 
Supposing all the items are enclosed inside 'tbody' tags we can proceede as follows: 
<script type="text/javascript"> 
$(function(){ 
    $("#createTable").click(function(){ 
     var ntr='',//to store html for new table row 
     rows=[],//to collect new rows 
     $tbl=$("#table_rolecart tbody"),//original table 
     l=$("tr", $tbl).length;//length of rows in original table's tbody section 
     var row, brow, drow; 
     for(var i=0;i<l;){ 
      row=$("tr:eq("+i+")", $tbl);//row with item name 
      brow=row.next("tr");//row with business justification textbox 
      drow=brow.next("tr");//row with date textboxes 

      ntr='<tr><td>'+$("td:nth-child(2)",row).text()+'</td><td>' //add item name 
       +$("td:nth-child(3)",row).text()+'</td><td>'//add description 
       +$(brow).find("input#ar_businessjust").val()+'</td><td>' //add business just. 
       +$(drow).find("input#ar_startdate").val()+'</td><td>'//start date 
       +$(drow).find("input#ar_enddate").val()+'</td></tr>';//end date 
       rows.push(ntr); 
      i+=3;//we have traversed 3 rows so next one should be current + 3 
     } 
     $("#newTable tbody").append(rows.join('')); 
     $("#newTable").show(); 
    }); 
}); 
</script> 
</body> 
</html>

источник

2011-12-14 06:46:36 TheVillageIdiot

Это работает отлично по мере необходимости .. Спасибо тонну. –

Вместо того, чтобы показывать новую таблицу на той же странице, мне было интересно, как перенаправить содержимое и отобразить таблицу на nextpage.gsp, я могу создать шаблон gsp и скопируйте эту таблицу в нее и включите шаблон в мой следующий звонок? –

вы можете создать объект 'JSON' вместо создания таблицы и передать ее на следующую страницу. – TheVillageIdiot

дают идентификатор для каждого TD, который вы хотите для копирования содержимого. это легче указать, так как таблица является немного трудным/сложным для обработки

источник

2011-12-14 04:45:07 bondythegreat

объединения Mutiple строк в строку HML таблицы с помощью JQuery

ответ

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