javascript - 我怎样才能提取标签在表格单元格中的内容？

Question

首先，我的表是这样的：

<table class="table table-bordered table-sm table-hover">
    <thead>
        <tr class="thead-light border">
            <th>name</th>
            <th>difficulty</th>
            <th>goal</th>
            <th>recommended</th>
            <th>return</th>
        </tr>
    </thead>
    <tbody id="chosen">
        <tr>
            <td>aaa</td>
            <td>1</td>
            <td>50</td>
            <td>
                <p>recommended1</p>
                <p>recommended2</p>
                <p>recommended3</p>
            </td>
            <td>
                <p>return1</p>
            </td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>2</td>
            <td>100</td>
            <td>
                <p>recommended1</p>
            </td>
            <td>
                <p>return1</p>
            </td>
        </tr>
    </tbody>
</table>

“推荐”列可以有 1~3 个 <p> 标签。而且，我想做的是，在每个 <p> 标签之间提取字符串，然后将其用作 id 标签。像这样：

如果我提取了“recommended1”、“recommended2”，我想这样做，例如：

$('#recommended1').data('maphilight', data).trigger('alwaysOn.maphilight');
$('#recommended2').data('maphilight', data).trigger('alwaysOn.maphilight');

但问题是，提取的字符串像这样相互连接>推荐1推荐2推荐3

我的代码是：

    $("#chosen").on("click", "tr td:not(:last-child)", function() {
        var currentRow=$(this).closest("tr");
        var col3=currentRow.find("td:eq(3)").find("p").text();
        var data=col3
        alert(data);
    });

提醒检查。

Q1。如何分离提取的字符串？

Q2。如何使用提取的字符串作为标签？

标签： javascripthtmljquery

Answer 1

你可以只使用 js 来达到你的目标，简单地使用querySelectorAllfind allp然后你可以以多种方式使用它，在我的示例中，我使用forEachwithconsole.log来打印每一个。

var table = document.getElementById('table'); //select table
var AllP = table.querySelectorAll('p'); //select all p


AllP.forEach(function(p) {
  console.log(p); // all tag
  console.log(p.innerHTML); //just text
  console.log(' '); // space for better understanding
});
/*
You print one of the array like:
console.log(p[0]); choise index based on your choise
*/

<table class="table table-bordered table-sm table-hover" id='table'>
    <thead>
        <tr class="thead-light border">
            <th>name</th>
            <th>difficulty</th>
            <th>goal</th>
            <th>recommended</th>
            <th>return</th>
        </tr>
    </thead>
    <tbody id="chosen">
        <tr>
            <td>aaa</td>
            <td>1</td>
            <td>50</td>
            <td>
                <p>recommended1</p>
                <p>recommended2</p>
                <p>recommended3</p>
            </td>
            <td>
                <p>return1</p>
            </td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>2</td>
            <td>100</td>
            <td>
                <p>recommended1</p>
            </td>
            <td>
                <p>return1</p>
            </td>
        </tr>
    </tbody>
</table>

但是，如果您想使用jquery：

var AllP = $('#table').find('p'); //select all p
$(AllP).each(function() {
  console.log($(this).text()); //just text
  console.log(' '); // space for better understanding
});

/*
You print one of the array like:
console.log(p[0]); choise index based on your choise
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-sm table-hover" id='table'>
    <thead>
        <tr class="thead-light border">
            <th>name</th>
            <th>difficulty</th>
            <th>goal</th>
            <th>recommended</th>
            <th>return</th>
        </tr>
    </thead>
    <tbody id="chosen">
        <tr>
            <td>aaa</td>
            <td>1</td>
            <td>50</td>
            <td>
                <p>recommended1</p>
                <p>recommended2</p>
                <p>recommended3</p>
            </td>
            <td>
                <p>return1</p>
            </td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>2</td>
            <td>100</td>
            <td>
                <p>recommended1</p>
            </td>
            <td>
                <p>return1</p>
            </td>
        </tr>
    </tbody>
</table>