объединение нескольких строк в строку таблицы hml с помощью jquery - PullRequest
Новая
       3

объединение нескольких строк в строку таблицы hml с помощью jquery

0 голосов
/ 14 декабря 2011

У меня есть таблица с такими строками и столбцами 

row1            1      2      3
row2                   4
row3               5        6

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

   row1         2   3   4   5   6

Таким образом, все поля должны быть в одной строкеи для 2-го элемента в корзине во второй строке и т. д., первый столбец (td), который является изображением, должен быть удален, 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 элементы в эту таблицу, как снаружи, из другой таблицы, такой как 

$("#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>');

    });

Ответы [ 2 ]

1 голос
/ 14 декабря 2011

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

ПОПРОБУЙТЕ ЗДЕСЬ: 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>
0 голосов
/ 14 декабря 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...