Question

我正在创建一个用户脚本，使用javascript / jQuery收集和显示下表中的文本：

<table id="table-cours">
    <tbody>
        <tr>
            <td class="calendar-time"> time1 </td>
            <td>
                <div class = popup-calendar-event> popup content 1 </div>
                <div class = "link-event"> event 1 </div>
            </td>
        </tr>
        <tr>
            <td class="calendar-time"> time2 </td>
            <td>
                <div class = popup-calendar-event> popup content 2 </div>
                <div class = "link-event"> event 2 </div>
            </td>
        </tr>
        <tr>
            <td class="calendar-time"> time3 </td>
            <td>
                <div class = popup-calendar-event> popup content 3 </div>
                <div class = "link-event"> event 3 </div>
            </td>
        </tr>
    </tbody>
</table>

我想收集此表中包含的所有文本，但div.popup-calendar-event元素中包含的文本除外。

我的目标是像这样显示：

时间1 ：事件1
时间2 ：活动2
时间3 ：活动3

问题是表格的行数可以改变，这里我放3行但它们可以是1或10或任何其他数字。

我尝试了许多方法，比如使用not()方法，或者使用“tr”元素数组的for()循环，但它永远不会有效。

Answer 1

＆＃13;

$('tr').each(function(data) {
  var calTime = $(this).find('.calendar-time')[0].innerHTML;
  var linkEvent = $(this).find('.link-event')[0].innerHTML;
  $("#result").append('<li><b>' + calTime + '</b> : ' + linkEvent + '</li>');
  console.log('<li><b>' + calTime + '</b> : ' + linkEvent + '</li>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="table-cours">
  <tbody>
    <tr>
      <td class="calendar-time">time1</td>
      <td>
        <div class=p opup-calendar-event>popup content 1</div>
        <div class="link-event">event 1</div>
      </td>
    </tr>
    <tr>
      <td class="calendar-time">time2</td>
      <td>
        <div class=p opup-calendar-event>popup content 2</div>
        <div class="link-event">event 2</div>
      </td>
    </tr>
    <tr>
      <td class="calendar-time">time3</td>
      <td>
        <div class=p opup-calendar-event>popup content 3</div>
        <div class="link-event">event 3</div>
      </td>
    </tr>
  </tbody>
</table>


<ul id="result"></ul>

＆＃13;

Answer 2

您可以使用类似的内容来解析表内容并获取对象数组

var data = $('#table-cours > body > tr').map(function($i, $r) {
    var $row = $(this);
    return {
            title: $row.find('.calendar-time').text(),
            event: $row.find('.link-event').text()
    };
}).get();

之后，您可以根据需要使用data数组。

Answer 3

您可以尝试类似

的内容

$(".calendar-time").each(function () {
    console.log($(this).html() + '-' + $(this).next('td').find('.link-event').html());
});

小提示演示 - http://jsfiddle.net/bL644p7b/

Answer 4

$(function(){
    $("#table-cours .popup-calendar-event").each(function(iter, item){
        $(".result").append("<div> time "+(iter+1) +" "+ $(this).text() +"</div>");
    });
});

您只需要每个方法进行迭代。第一个参数是迭代器。

http://jsfiddle.net/qufgyh3c/

Answer 5

var rows = $('#table-cours > tr');

var map = {};

rows.each(function(row){

  var key = $(row).find('td.calendar-time');
  var value = $(row).find('td > div.link-event');
  map[key]=value;
});

Answer 6

$(document).ready(function() {
    $(".calendar-time").each(function() {
        var output = "";
        output += $(this).text() +  " : ";
        output += $(this).next().find(".link-event").text();
        $(".output").append(output);
    });
});

JSFiddle：https://jsfiddle.net/cq772j9s/

Answer 7

我愿意：

$.each($('#table-cours tr'), function (i, val) {
    $('#results ul').append('<li><strong>' + $(val).find('td.calendar-time').text() + '</strong>:' + $(val).find('.link-event').text() + '</li>');
});

example fiddle here

如何从表格中收集文字？

7 个答案:

如何从表格中收集文字​​？

7 个答案:

如何从表格中收集文字？