Question

我在检查google chrome上的元素时可以看到以下HTML。

<table id="table_id">
    <tr role="row" class="odd">
        <td id="aptDate0" class="sorting_1">2015-03-08</td>
        <td id="aptDateEnd0" style="display:none;">2015-03-08</td>
        <td id="Start0">10:30:00</td>
        <td id="End0">11:30:00</td>
        <td id="Duration0">01:00:00</td>
        <td>John Doe</td>
        <td>Jane Doe<td>
        <td id="Status0">n/a</td>
    </tr>
    <tr role="row" class="odd">
        <td id="aptDate1" class="sorting_1">2015-03-08</td>
        <td id="aptDateEnd1" style="display:none;">2015-03-08</td>
        <td id="Start1">10:30:00</td>
        <td id="End1">11:30:00</td>
        <td id="Duration1">01:00:00</td>
        <td>John Doe</td>
        <td>Jane Doe<td>
        <td id="Status1">n/a</td>
    </tr> ... and so on
</table>

我之前使用的是document.getElementById（'id'）。innerHTML但现在我必须调用$（document）.ready（function（）中的函数，所以我需要使用jQuery来获取值。

我有以下循环：

for (i=0; i < 10; i++){

    var aptDate = $('#table_id #aptDate'+i).textContent;
    //textContent returns undefined
    var aptDate = $('#table_id #aptDate'+i).text();
    //.text() returns an empty string
    var aptDate = $('#table_id #aptDate'+i).val();
    //.val() returns undefined
    var aptDate = $('#table_id #aptDate'+i).html;
    //.html retturns function (e){return x.access(this,function(e){var       n=this[0]||{},r=0,i=this.length;if(e===t)return 1===n.nodeType?n.innerHTML.replace(gt,""):t;if(!("string"!=typeof e||Tt.test(e)||!x.support.htmlSerialize&&mt.test(e)||!x.support.leadingWhitespace&&yt.test(e)||At[(bt.exec(e)||["",""])[1].toLowerCase()])){e=e.replace(vt,"<$1></$2>");try{for(;i>r;r++)n=this[r]||{},1===n.nodeType&&(x.cleanData(Ft(n,!1)),n.innerHTML=e);n=0}catch(o){}}n&&this.empty().append(e)},null,e,arguments.length)}
    console.log(aptDate);
 }

我的数据表初始化如下：

 $('#table_id').dataTable({
                bProcessing: true,
                bServerSide: true,
                "sAjaxSource": "script.php",
                "rowCallback": function( row, data, index ) {

                    if ( data[9] == "0" ) {
                        $('td:eq(9)', row).html('Not scanned');
                        $('td:eq(9)', row).css("color", "red");
                    }
                    else if (data[9] !== data[12]){
                        $('td:eq(9)', row).html('Incorrect QR Scanned');
                        $('td:eq(9)', row).css("color", "red");
                    }
                    else{
                        $('td:eq(9)', row).html('Scanned');
                    }
                    $('td:eq(1)', row).css("display", "none");
                    $('td:eq(12)', row).css("display", "none");
                    $('td:eq(13)', row).css("display", "none");

                    $('td:eq(0)', row).attr("id", "aptDate"+index);
                    $('td:eq(1)', row).attr("id", "aptDateEnd"+index);
                    $('td:eq(2)', row).attr("id", "Start"+index);
                    $('td:eq(3)', row).attr("id", "End"+index);
                    $('td:eq(4)', row).attr("id", "Duration"+index);
                    $('td:eq(7)', row).attr("id", "Status"+index);
                    $('td:eq(8)', row).attr("id", "hasInternet"+index);
                    $('td:eq(9)', row).attr("id", "QRScanned"+index);
                    $('td:eq(12)', row).attr("id", "suID");
                    $('td:eq(13)', row).attr("display", "aptID");
                    //update();
                  }
});

如何获取我的td单元格的innerHTML。我可以看到他们在屏幕上的桌子上都有值。

编辑我忽略了提到我正在使用数据表。这与为什么这些解决方案不起作用有关吗？

Answer 1

使用.text（）或.html（）,. val（）旨在获得值=＆＃34;＆＃34;属性。您还可以使用原生javascript属性＆＃39; textContent＆＃39;。

http://jsfiddle.net/8f0oac6o/2/

for (i=0; i < 2; i++){
    var aptDate = $('#table_id #aptDate'+i).text();
    console.log(aptDate);
    var aptDate = $('#table_id #aptDate'+i).html();
    console.log(aptDate);
     var aptDate = document.getElementById ( "aptDate"+i ).textContent;
     console.log(aptDate);
 }

Answer 2

var aptDate = $('#table_id #aptDate'+i).html()

会奏效。但不是一个好的解决方案。你可以得到这样的价值：

$('#aptDate'+i).html()

或

$('#aptDate'+i).text()

Answer 3

我从你的例子中创建了一个jsfiddle，它使用id属性获取你的值。 http://jsfiddle.net/jydq09L5/2/

但基本上我使用原生Javascript，因为它看起来是最好的解决方案。如果你不必使用jQuery，那么这是更好的方法，即使它在jQuery文档就绪函数中。

var val = document.getElementById("Start0").innerHTML;
alert(val);

Answer 4

<table class="table table-bordered">
    <tr role="row" class="odd">
        <td id="aptDate0" name="data" class="sorting_1">2015-03-08</td>
        <td id="aptDateEnd0" name="data" style="display:none;">2015-03-08</td>
        <td id="Start0" name="data">10:30:00</td>
        <td id="End0" name="data">11:30:00</td>
        <td id="Duration0" name="data">01:00:00</td>
        <td name ="data" id="name1">John Doe</td>
        <td name="data" id="name1">Jane Doe</td>
        <td name="data" id="Status0">n/a</td>
    </tr>
    <tr role="row" class="odd">
        <td id="aptDate1" name="data" class="sorting_1">2015-03-08</td>
        <td id="aptDateEnd1" name="data" style="display:none;">2015-03-08</td>
        <td id="Start1" name="data">10:30:00</td>
        <td id="End1" name="data">11:30:00</td>
        <td id="Duration1" name="data">01:00:00</td>
        <td name="data" id="name2">John Doe</td>
        <td name="data" id="name2">
            Jane Doe
        </td>
        <td id="Status1" name="data">n/a</td>
    </tr>
</table>


<script>

    $('td[name=data]').click(function () {
        alert($(this.id).html());
    });

</script>

尝试上面的代码，它为我工作，我只是在名称单元格中添加了id并给了所有单元格相同的内容，所以我可以通过jquery中的单个函数获取单元格的html ...

试一试。

Answer 5

你的循环从0到9运行。你确定你有足够的行吗？当td存在时，.html（）返回正确的值。但是当td不存在时，.html返回上述函数，而.html（）返回undefined。

Answer 6

在我的数据表初始化中尝试initComplete和drawCallback参数后，都没有工作。

然后我终于使用了它：

$('#table_id').on( 'draw.dt', function () {
    update();
    //update fn contains my loop
});

在jQuery中通过id获取我的td单元格的值

6 个答案: