Question

使用jQuery，我如何将一个vanilla表（没有id或类）的一部分放入div元素中？该表是一个简单的午餐菜单，其中包含一周中的几天，其后是休息，午餐和甜点，每个元素都有自己的td元素。我想在星期一和星期二，星期二和星期三之间抓住所有东西，依此类推。

以下是我working with的示例表。

<table border='1'>
  <tr>
    <th>Monday</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>breakfast</th>
    <td>cereal</td>
  </tr>
  <tr>
    <th>lunch</th>
    <td>hamburger</td>
  </tr>
  <tr>
    <th>dessert</th>
    <td>cake</td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>Tuesday</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>breakfast</th>
    <td>bagel</td>
  </tr>
  <tr>
    <th>lunch</th>
    <td>chicken</td>
  </tr>
  <tr>
    <th>dessert</th>
    <td>cookie</td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>Wednesday</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>breakfast</th>
    <td>eggs</td>
  </tr>
  <tr>
    <th>lunch</th>
    <td>sandwich</td>
  </tr>
  <tr>
    <th>dessert</th>
    <td>pie</td>
  </tr>
</table>

Answer 1

我想在星期一到星期二之间抓住所有东西，

好吧，星期一是0行，星期二是5行。所以slice可能会有关：

var rows = $("selector-for-the-table tr").slice(1, 6);
// Get the info from `rows`

例如：Updated Fiddle

var rows = $("table tr").slice(1, 6);
display("Selected data:");
rows.each(function() {
    display($(this).find("td").text());
});


function display(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
}

这给了我们：

Selected data:
cereal
hamburger
cake

Answer 2

以下是一种方法 - http://jsfiddle.net/msbDc/4/

var start = $('table th:contains(Monday)').parent().index();
var end = $('table th:contains(Tuesday)').parent().index();
console.log(start +' '+ end);
var myRows = $('tr').slice(start, end).clone();

$('div').html(myRows);
$('div tr').wrapAll('<table border="1"></table>');

根据OP的评论，我更新了小提琴和代码 - http://jsfiddle.net/jayblanchard/msbDc/5/

var start = $('table th:contains(Monday)').parent().index();
var end = $('table th:contains(Thursday)').parent().index();
console.log(start +' '+ end);
if(-1 == end) { // if the endpoint doesn't exist, get everything from start to end.
    var myRows = $('tr').slice(start).clone();
} else {
    var myRows = $('tr').slice(start, end).clone();
}

Answer 3

谢谢周杰伦的帮助。我最终得到了类似的东西：

for (var i = 0; i < menuDays.length; i++) { // Sunday - Saturday array
        if (i > 0 && i < 6) { // skip Sunday and Saturday
            start = $("table th:contains(" + menuDays[i] + ")").parent().index();
            if (i == 5) {
                end = $("table th:contains(Friday)").parent().siblings().length + 1;
            } else {
                end = $("table th:contains(" + menuDays[i + 1] + ")").parent().index();
            }
            rows = $("#foodTable tr").slice(start + 1, end).clone();
            $("#foodOption" + menuDays[i]).html(rows);
            $("#foodOption" + menuDays[i] + " tr").wrapAll("<table></table>");
        }
    }

将表的一部分放入div中

3 个答案: