0

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Michael Bale
  • 21
  • 4

4 Answers4

1

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>
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
  • Hmmm, I think he might actually mean that the `` elements have the class `task-name`, and he wants to remove the first four characters from each of their first `` children. – Serlite May 19 '15 at 13:45
  • Yeah, it's unclear. I'm guessing based on the code, which does go directly for the elements of that class. – Paul Roub May 19 '15 at 13:46
  • tr has the class not td – Royi Namir May 19 '15 at 13:47
  • @PaulRoub That's true, his attempts do suggest that. I was looking more at the description of what he wanted, where he wanted to remove "the first 4 characters from the first `` of each row", and "The row has a classname of "task-name"". It does conflict with his code, though. – Serlite May 19 '15 at 13:47
  • Yeah sorry, the tr elements have the class - I'm unable to give the td elements a class because of the way the table is put together. I've tried '.task-name td:first-child', but that didn't do anything. Getting rid of the first four characters of any element with any class name hasn't worked yet. I'm going to work my way through everyone's suggestions now and I'll get back to you - cheers! – Michael Bale May 19 '15 at 14:00
  • Thanks, you're answer would normally work, but as someone pointed out, using angularjs is interfering with it working. I'd vote this up, but unfortunately I don't have enough points! Thank you for you help though :) – Michael Bale May 20 '15 at 09:19
0

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

Community
  • 1
  • 1
isherwood
  • 58,414
  • 16
  • 114
  • 157
  • Ah right. Adding that stops the modal with the table in appearing. I tried using an ng-class as well to see if that helped, but it didn't. If the data isn't meant to be meddled with, I'll leave it be. It was just for aesthetics and UX anyway, I can live with it! Thank you :) – Michael Bale May 19 '15 at 14:52
  • I'm not sure what you're telling me. Modal? What are you "living with"? – isherwood May 19 '15 at 15:00
  • The table is a progress report of a list of jobs running. It appears in a modal/popup/dialog-box when the user clicks on a button. Adding td class="col-sm-7">{{task.TaskName | removeFour}} stopped the modal from appearing. The jobs have numbers next to them, and all I wanted to do was take some off. I would show a picture but I don't have enough points haha. e.g. a task name would have a number before it: "1.1.1.1 Task Name One". I wanted to get rid of the first 4 characters so you'd be left with "1 Task Name One". I can live with not being able to have it that way – Michael Bale May 19 '15 at 15:13
  • Well, I can't. :) The broken modal probably means we have a syntax error, which could cause more serious problems. Check the browser console. – isherwood May 19 '15 at 15:15
  • Haha ok, was I meant to put something in the brackets after .module, because it's giving me a syntax error? And should I just stick that code between some – Michael Bale May 20 '15 at 08:45
  • Yeah, you'll need to investigate the AngularJS app and apply `.filter(...)` to the existing module. This isn't a plug-and-play scenario outside AngularJS. – isherwood May 20 '15 at 14:19
0
$('.task-name td:first-child').each(function() {
    var str = $(this).text().substring(0, 4);
    console.log(str);
});

jsfiddle DEMO

Samurai
  • 3,724
  • 5
  • 27
  • 39
0

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

Royi Namir
  • 144,742
  • 138
  • 468
  • 792