CODEWITHSUNDEEP
javascriptjqueryhtml
Houy Narun
Houy Narun

Reputation: 1725

How to get element content in table but outside tr tag in jQuery?

Data I received from database, Postgresql, is html content for rendering in browser, it is as following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Employee</title>
</head>
<body>
    <table>
        <tr>
            <td>ID</td>
            <td>First Name</td>
            <td>Last Name</td>
        </tr>
        <tr>
            <td>CU0012</td>
            <td>David</td>
            <td>Jonh</td>
        </tr>
        untitle Name <!-- content I would like retrieve and manipulate -->
        <tr>
            <td>CU0010</td>
            <td>Siv</td>
            <td>Hellen</td>
        ></tr>
        <tr>
            <td>CU0009</td>
            <td>Merry</td>
            <td>Mug</td>
        ></tr>
    </table>
</body>
</html>

Is it possible that I want to be able to get text untitle Name that is in table but outside of tr tag so that I can manipulate it thereafter?

As a mater of fact, after this html script rendered in browser, any content that is not wrap properly in table would be forced to get outside of table, yet before it rendering I would like to keep there by access to it and make it properly wrap into table.

<script>
    $(document).ready(function(){
        htmlTable = $('table tr').html();
        htmlTable.each(function(){
        // check element is in tr or not
        });
    })
</script>

How can I archive that in jQuery? Thanks.

Upvotes: 0

Views: 219

Answers (1)

Sphinx
Sphinx

Reputation: 10729

When receive html content by ajax or other method, you can use String.prototype.replace() to remove the unexpected html content or replace with expected content before load it into one html element.

//for example, you receive below text from the server
var serverData = '<table border="1"><tr><td>CU0012</td><td>David</td><td>Jonh</td></tr>untitle name<tr><td>CU0010</td><td>Siv</td><td>Hellen</td></tr></table>';

function loadReviseHtml(){
  var reviseData = serverData.replace(/<\/tr>\s*(.+)\s*<tr>/, '</tr><tr><td style="background-color:red">$1</td></tr><tr>');
  console.log(reviseData)
  document.getElementById('htmlcontainer1').innerHTML = reviseData;
}

function loadOrgHtml(){
  document.getElementById('htmlcontainer1').innerHTML = serverData;
}
<a onclick="loadReviseHtml()" style="background-color:green;">Click me to load revised html!</a>
<div id="htmlcontainer1" style="background-color:gray;">
No Data!
</div>

<a onclick="loadOrgHtml()" style="background-color:red;">Click me to load org html!</a>

Upvotes: 1

Related Questions