通过 jQuery 中的 id 获取我的 td 细胞的价值

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,"<></>");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初始化如下：

 $('#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 细胞的内部HTML。我可以看到它们在屏幕上的 table 上都有值。

编辑我忘记提到我正在使用数据table。这与为什么这些解决方案对我不起作用有什么关系吗？

Answer 1

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

会起作用。但不是一个好的解决方案。您可以获得这样的值：

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

或

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

Answer 2

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

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

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

Answer 3

<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，并为所有单元格提供了相同的 ID，因此我可以通过 jquery 中的单个函数获得 html 个单元格。 ..

试一试。

Answer 4

使用.text() 或.html()，.val() 用于获取value="" 属性。也可以使用原生 javascript 属性 'textContent'.

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 5

你的循环从 0 运行到 9。你确定你有足够的行吗？当存在 td 时，.html() returns 是正确的值。但是，当 td 不存在时，.html returns 提到的函数和 .html() returns undefined.

Answer 6

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

然后我终于让它工作了：

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

通过 jQuery 中的 id 获取我的 td 细胞的价值

getting value of my td cells by id in jQuery

html

javascript

datatable

jquery