JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<div data-bind="template: {">
    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Author</th>
                <th>Categories</th>
                <th>Tags</th>
                <th>Comments</th>
                <th>Date</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: $data.list">
            <tr>
                <td>
                    <span>This is the post title</span>
                    <a href="/admin/post/edit/1013318"></a>
                </td>
                <td>
                    <a href="#author-url">Author Name</a>
                </td>
                <td>
                    <a href="#category-1">Category #1</a>
                </td>
                <td>
                    <a href="#">Tag 1</a>,
                    <a href="#">Tag 2</a>,
                    <a href="#">Tag 3</a>
                </td>
                <td>
                    <a href="#">4</a>
                </td>
                <td>
                    Thu Feb 09 2017 11:12:00 GMT-0700 (Mountain Standard Time)	
                </td>
                <td>
                    publish
                </td>
            </tr>
            <tr>
                <td>
                    <span>This is the post title #2</span>
                    <a href="/admin/post/edit/8675309"></a>
                </td>
                <td>
                    <a href="#">Author Name #2</a>
                </td>
                <td>

                </td>
                <td>
                    <a href="#">Tag 12</a>,
                    <a href="#">Tag 3</a>,
                    <a href="#">Tag 9</a>
                </td>
                <td>
                    <a href="#">2</a>
                </td>
                <td>
                    Tue Feb 07 2017 11:34:00 GMT-0700 (Mountain Standard Time)	
                </td>
                <td>
                    publish
                </td>
        ...

CSS

.migrate { border: 1px solid red; }

.posts-textarea {
    width: 100%;
    height: 200px;
    margin-bottom: 3em;
}

JavaScript

var postsTable = $('tbody[data-bind^="foreach: "] tr');

// Replace commas with pipe character but not inside child elements
$(postsTable).find('td:nth-child(3), td:nth-child(4)').contents().filter(function(){
	return this.nodeType === 3;
}).replaceWith('');

$(postsTable).find('td:nth-child(3) a, td:nth-child(4) a').after('|');

function getPostsData() {
	console.log( $(postsTable).map(function() {
        return  $(this).find('td:nth-child(1) a').attr('href').slice(17) + ',' + '"' + 		// post ID
                $(this).find('td:nth-child(1) span').text() + '"' + ',' + '"' +				// title
                $(this).find('td:nth-child(2) a').text() + '"' + ',' + '"' +				// author
                $(this).find('td:nth-child(3)').text().slice(0, -1) + '"' + ',' + '"' +		// categories
                $(this).find('td:nth-child(4)').text().slice(0, -1) + '"' + ',' + '"' +		// tags
                $(this).find('td:nth-child(6)').text().trim().slice(4, -34) + '"' + ',' + // date
                $(this).find('td:nth-child(7)').text().trim();
    }).get().join('\n') );
}

getPostsData();

$('button[data-bind^="click: next"]').on('click', function(){
	getPostsData();
});