jqueryでスマホのときだけタグを追加したい

やりたいこと

html
1<table>
2 <tr>
3    <th class="test">タイトル01</th>
4    <td>内容01</td>
5 </tr>
6 <tr>
7    <th class="test">タイトル02</th>
8    <td>内容02</td>
9 </tr>
10</table>

このようなhtmlを、スマホのときは下記のように書き換えたいです。

html
1<table>
2 <tr>
3    <th class="test">タイトル01</th>
4 </tr>
5 <tr>
6    <td>内容01</td>
7 </tr>
8 <tr>
9    <th class="test">タイトル02</th>
10 </tr>
11 <tr>
12    <td>内容02</td>
13 </tr>
14</table>

試してみたこと

JavaScript
1<script type="text/javascript" src="../common/js/jquery-1.11.1.min.js"></script>
2<script>
3if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
4$(</th>).replaceWith("</th></tr><tr>");
5}
6</script>

JavaScript
1<script type="text/javascript" src="../common/js/jquery-1.11.1.min.js"></script>
2<script>
3if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
4    $("th.test").after("</tr><tr>");
5}
6</script>

どちらも上手くいかず、どうしたら解決できるのか解りません。
どなたかご教授いただけないでしょうか。
よろしくお願いいたします。

追記

PCでは<th>と<td>を横並びにした2列表示ですが、スマホでは横並びではなく縦に表示させたいと思っています。
説明が解りづらくて申し訳ありません。

行動規範の内容に同意します

回答2件

ベストアンサー

replaceを使いこのように行うと良いとおもいます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<div id="box">
15    <table>
16        <tr>
17            <th class="test">タイトル01</th>
18            <td>内容01</td>
19        </tr>
20        <tr>
21            <th class="test">タイトル02</th>
22            <td>内容02</td>
23        </tr>
24    </table>
25</div>
26<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
27<script>
28    $(document).ready(function () {
29        if (navigator.userAgent.match("iPhone")
30            || navigator.userAgent.match("iPhone")
31            || navigator.userAgent.match("iPad")
32            || navigator.userAgent.match("iPod")
33            || navigator.userAgent.match("Android")
34        ) {
35            $("table").each(function () {
36                $(this).html($(this).html().replace(/\<\/th\>/g, "</th></tr><tr>"));
37            });
38        }
39    });
40</script>
41</body>
42</html>

投稿2017/02/22 08:47

編集2017/02/22 08:47

s8_chu

総合スコア14731

korokorota

2017/02/22 09:10

早速回答いただきありがとうございます。書いていただいたものに書き換えたところ、無事表示できました！ replaceの記述が間違っていたのですね。もっと勉強します。本当にありがとうございました。

行動規範の内容に同意します

onloadイベント後にやらないとダメなのでは？つまり

javascript
1$(function(){
2///ここにコードを書く
3});

投稿2017/02/22 08:15

turbgraphics200

総合スコア4267

korokorota

2017/02/22 08:39 編集

回答ありがとうございます。全くの初心者で非常に申し訳ないのですが、下記のように書き換えてみましたがうまくいきませんでした。どこか記述の仕方が間違えているでしょうか？ <script> if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){ $(function(){ $( "th.test" ).after( "</tr><tr>" ); }); } </script>