How can I use JavaScript to apply formatting to a <td> in an HTML table?

Question

So I am trying to apply JavaScript to an entire column in an Html table.

Below is my Script (please ignore the first daterange function but I wanted to show the full code):

All I am trying to do is add a breakline after each comma in the Message row of the table. Any idea where I am going wrong? Thank you.

<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker({

     singleDatePicker: true,
     locale: {
         format: 'YYYY-MM-DD'
     }
});

 function formatMessage() {
 var yourString = document.getElementById('msg').value;
 var formattedText = yourString.split(",").join("\n");
 $('msg').html(formattedText);
   }; 

});
</script>

Below is the relevant HTML:

<table class="table table-striped jambo_table bulk_action">
  <thead>
    <tr class="headings">
        <th class="column-title">Message</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="statement in statements track by $index">
      <td class=" " id="msg" style="display:none;">{{statement.msg}}</td>
      <td class=" ">{{statement.msg}}</td>
    </tr>
  </tbody>
</table>

ids are singular. Why are you not doing the transformation with angular? — epascarello
– epascarello, Commented May 10, 2017 at 19:28
This is my first time using angular, all of my online searches for solutions have been searching JavaScript. If there is a way to use Angular, I will research that — John Brofser
– John Brofser, Commented May 10, 2017 at 19:32
You are going to create multiple td with id=msg. Also $('msg') should be $('#msg') in jQuery if you want element by id. — vabii
– vabii, Commented May 10, 2017 at 19:32
Thank you, I thought that by having the ID='msg' for each row, then the formatting would apply to each row — John Brofser
– John Brofser, Commented May 10, 2017 at 19:38

Ayush pratap · Accepted Answer · 2017-05-10 20:30:08Z

1

First of all,

 var yourString = document.getElementById("msg").value;

is not the correct way to get the value of a "td" tag. You shall do something like this.

var yourString_obj = document.getElementById("msg");
var yourString_text = yourString_obj.innerHTML;

or

var yourString = document.getElementById("msg").innerHTML;

For spliting the text and inserting the new line you shall use following functions. split() join() and use <br> for adding a new line to your text.

Following should solve your problem.

function formatMessage() {
var yourString = document.getElementById("msg").innerHTML;
var formattedText = yourString .split(",").join(",<br>");
document.getElementById("msg").innerHTML = formattedText ;
};

});

answered May 10, 2017 at 20:30

Ayush pratap

668 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

popensesame · Accepted Answer · 2017-05-10 19:48:31Z

1

yourMessage.split(",").join("\n") effectively replaces all occurrences of commas with a newline character.

If you want to add a newline character after each instance of a comma, try yourMessage.split(",").join(",\n").

MDN article on String.prototype.split

answered May 10, 2017 at 19:48

popensesame

111 silver badge4 bronze badges

Collectives™ on Stack Overflow

How can I use JavaScript to apply formatting to a <td> in an HTML table?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related