CODEWITHSUNDEEP
javascriptjqueryangularjssubstringslice
Michael Bale
Michael Bale

Reputation: 21

How can I cut off characters from a specific column in a table?

There are quite a few similar issues on here, but none of those solutions seem to work. I have a table where the content is dynamically loaded in via some voodoo, and I want to take the first 4 characters from the first <td> of each row off. The row has a classname of "task-name".

<tbody class="row maintask" ng-repeat="task in job.Tasks">
    <tr class="task-name">
        <td class="col-sm-7">{{task.TaskName}}</td>
        <td class="col-sm-4 col-sm-offset-1">{{task.TaskStatusStageDisplay}} <span ng-show="{{task.IsFailed}}||{{task.HasWarnings}}"><a href="{{task.StatusActionUrl}}" class="btn btn-sm btn-default pull-right" target="_Blank"> Errors</a></span> 
        </td>
    </tr>
    <tr class="subtask1 task-name" ng-repeat-start="subtask in task.SubJobTasks" ng-include="'tree_item.html'"></tr>

I've tried:

var text = '.task-name'.substring(4);

and

$('.task-name').substring(4);

as well as a few other variations, including using substr and slice. I've also tried it on other elements on the page to see if the table was the issue, but that hasn't worked either. Any ideas? Cheers.

I've just tried everyone's suggestions so far and nothing's working, even if I try different classes, buuuuut.... I didn't say that this was happening in a modal, when I tried it on elements not in the modal it worked! Really wouldn't expect a modal to affect it though, unless it's more to do with how the table gets populated, but that stuff goes over my head.

Upvotes: 0

Views: 190

Answers (4)

Paul Roub
Paul Roub

Reputation: 36438

Updated - chopping off the first td in any tr with class task-name:

$('.task-name td:first-child').text(
  function() {
    return $(this).text().substring(4);
  }
);
td {
  background-color: #F0F0F0;
  padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table>
  <tr class="task-name">
    <td>first column</td>
    <td>other</td>
    <td>other</td>
  </tr>
  <tr class="task-name">
    <td>first column</td>
    <td>other</td>
    <td>other</td>
  </tr>
  <tr class="task-name">
    <td>first column</td>
    <td>other</td>
    <td>other</td>
  </tr>
</table>

Upvotes: 1

isherwood
isherwood

Reputation: 61063

Seeing from your updated question that you're using AngularJS, I'd create a filter:

<td class="col-sm-7">{{task.TaskName | removeFour}}</td>

.

angular.module(...)
  .filter('removeFour', function() {
    return function(data) {
        return data.slice(4);  // everything starting with index 4 (char 5)
    };
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice

Direct DOM and data minipulation violates the whole MVC concept of Angular. Read more

Upvotes: 0

Samurai
Samurai

Reputation: 3729

$('.task-name td:first-child').each(function() {
    var str = $(this).text().substring(0, 4);
    console.log(str);
});

jsfiddle DEMO

Upvotes: 0

Royi Namir
Royi Namir

Reputation: 148524

I want to take the first 4 characters from the first td of each row off. The row has a classname of "task-name".

See this : 

$(".task-name td:first-child").text(function (i,n){ return $(this).text().substring(4)})

http://jsbin.com/zaxena/4/edit

enter image description here

Upvotes: 0

Related Questions