jQuery追加输入 - 转义属性

时间:2016-06-17 08:39:01

标签: javascript php jquery

我有这个PHP脚本

$input = '<table id="options-table" border=0 cellpadding=6 cellspacing=0 class="data">
                    <thead>
                        <tr>
                            <th class="first"></th>
                            <th>Value</th>
                            <th>Label</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td><input name="option_val[]" value="uk"></td>
                            <td><input name="option_label[]" value="United Kingdom"></td>
                            <td><a href="" class="button tiny">Remove</a></td>
                        </tr>
                        <!-- <tr>
                            <td>2</td>
                            <td><input value="us"></td>
                            <td><input value="United States"></td>
                            <td><a href="" class="button tiny">Remove</a></td>
                        </tr> -->
                    </tbody>
                </table>
                <div style="margin-top:12px;">
                    <a onclick="$(\'#options-table tbody\').append(\'<tr><td>3</td><td><input name=\'option_val[]\' /></td><td><input name=\'option_label[]\' /></td><td></td></tr>\'); return false;" href="#" class="button" >Add option</a>
                </div>';

我要点击的是Add option按钮,在我的桌子上附加tr,其中包含两个input字段。问题是孔表是在php字符串内而不是普通的html,所以当我试图逃避输入属性时,我在firebug上遇到控制台错误:

SyntaxError: missing ) after argument list


...nd('<tr><td>3</td><td><input type='text' name='option_val[]' /></td><td><input t...

我该如何解决这个问题?

2 个答案:

答案 0 :(得分:0)

使用双引号&#34;而不是单一的&#39;

中的示例

使用

<input name=\"option_val[]\" /></td>

它只是一个解析引用问题

答案 1 :(得分:-1)

这是一个基本的HTML引用问题,如果你在里面就会以这种方式使用html <input name=option_val[] > 然后代码将运行,没有任何javaScript错误。使用这个修改后的代码,希望这个代码适合你

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<?php 
$input = '<table id="options-table" border=0 cellpadding=6 cellspacing=0 class="data">
                    <thead>
                        <tr>
                            <th class="first"></th>
                            <th>Value</th>
                            <th>Label</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td><input name="option_val[]" value="uk"></td>
                            <td><input name="option_label[]" value="United Kingdom"></td>
                            <td><a href="" class="button tiny">Remove</a></td>
                        </tr>
                        <!-- <tr>
                            <td>2</td>
                            <td><input value="us"></td>
                            <td><input value="United States"></td>
                            <td><a href="" class="button tiny">Remove</a></td>
                        </tr> -->
                    </tbody>
                </table>
                <div style="margin-top:12px;">
                    <a onclick="$(\'#options-table tbody\').append(\'<tr><td>3</td><td><input name=option_val[] ></td><td><input name=option_label[] ></td><td></td></tr>\'); return false;" href="#" class="button" >Add option</a>
                </div>';

echo $input;