js拼接table

-一个大坑 2018-05-14 04:35:02
有没有类似C#加一个@后面就可以直接写html,而不用+一句一句的拼接

function addAward(){
var aaa=@'<tr>
<td>
<div>
<span style="width: 50px" class="glyphicon glyphicon-plus"></span>
</div>
</td>
<td>
<div class="input-group" style="width: 250px">
<span class="input-group-addon">超期服务天数:</span>
<input type="text" class="form-control" name="IncentivePreRate" >
</div>
</td>
<td>
<div class="input-group" style="width: 250px">
<span class="input-group-addon">獎勵單價:</span>
<input type="text" class="form-control" name="IncentivePrice" placeholder="請輸入獎勵單價..." >
</div>
</td>
</tr>'
$("#awardTable").append();
}
...全文
731 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
-一个大坑 2018-05-15
  • 打赏
  • 举报
回复
引用 7 楼 wcwtitxu 的回复:
<td><div style="width: 50px" onclick="deleteTR()"><span class="glyphicon glyphicon-remove"></span></div></td> function deleteTR(){ $("table#awardTable tr").click(function() { $(this).remove(); }); }; 我放在td里,不点删除都正常,点删除后点哪一行就删那行,不能往文本框填值。为什么会这样?应该点带onclick的td才会触发删除方法才对
你是否未有 awardTable 就写了 js $(document).on("click", "#awardTable .glyphicon-remove", function(event){ $(this).closest("tr").remove(); });[/quote] 可以了,谢谢。我加onclick为什么不行?应该也是点td才触发
wcwtitxu 2018-05-15
  • 打赏
  • 举报
回复
引用 6 楼 happy4944 的回复:
[quote=引用 4 楼 jslang 的回复:]

        $("#awardTable").on("click", ".glyphicon-remove", function(event){
        	$(this).closest("tr").remove();
        });

按照你写的点击触发不了方法 我网上搜了两个 onclick="deleteTR(this)" function deleteTR(obj){ $(obj).remove(); }; 删除只能从最后一个往前删,不能随意删 <td><div style="width: 50px" onclick="deleteTR()"><span class="glyphicon glyphicon-remove"></span></div></td> function deleteTR(){ $("table#awardTable tr").click(function() { $(this).remove(); }); }; 我放在td里,不点删除都正常,点删除后点哪一行就删那行,不能往文本框填值。为什么会这样?应该点带onclick的td才会触发删除方法才对[/quote] 你是否未有 awardTable 就写了 js $(document).on("click", "#awardTable .glyphicon-remove", function(event){ $(this).closest("tr").remove(); });
-一个大坑 2018-05-15
  • 打赏
  • 举报
回复
引用 4 楼 jslang 的回复:

        $("#awardTable").on("click", ".glyphicon-remove", function(event){
        	$(this).closest("tr").remove();
        });

按照你写的点击触发不了方法 我网上搜了两个 onclick="deleteTR(this)" function deleteTR(obj){ $(obj).remove(); }; 删除只能从最后一个往前删,不能随意删 <td><div style="width: 50px" onclick="deleteTR()"><span class="glyphicon glyphicon-remove"></span></div></td> function deleteTR(){ $("table#awardTable tr").click(function() { $(this).remove(); }); }; 我放在td里,不点删除都正常,点删除后点哪一行就删那行,不能往文本框填值。为什么会这样?应该点带onclick的td才会触发删除方法才对
-一个大坑 2018-05-15
  • 打赏
  • 举报
回复
引用 1 楼 Free_Wind22 的回复:
用es6的字符串模板 var aaa = `<tr> ...`;
这个模板有什么限制吗?我的页面直接打不开,删了才行, var aaa=`jkhjkhjk`; alert(aaa);这种简单的不行
天际的海浪 2018-05-15
  • 打赏
  • 举报
回复
引用 5 楼 happy4944 的回复:
[quote=引用 1 楼 Free_Wind22 的回复:] 用es6的字符串模板 var aaa = `<tr> ...`;
这个模板有什么限制吗?我的页面直接打不开,删了才行, var aaa=`jkhjkhjk`; alert(aaa);这种简单的不行[/quote] ie浏览器不支持·模板字符串·
wcwtitxu 2018-05-15
  • 打赏
  • 举报
回复
<td><div style="width: 50px" onclick="deleteTR()"><span class="glyphicon glyphicon-remove"></span></div></td> function deleteTR(){ $("table#awardTable tr").click(function() { $(this).remove(); }); }; 你这个是,点击某一个 执行了 deleteTR() 时,给所有 TR再绑定点击删除的逻辑
天际的海浪 2018-05-15
  • 打赏
  • 举报
回复
引用 6 楼 happy4944 的回复:
[quote=引用 4 楼 jslang 的回复:]

        $("#awardTable").on("click", ".glyphicon-remove", function(event){
        	$(this).closest("tr").remove();
        });

按照你写的点击触发不了方法 我网上搜了两个 onclick="deleteTR(this)" function deleteTR(obj){ $(obj).remove(); }; 删除只能从最后一个往前删,不能随意删 <td><div style="width: 50px" onclick="deleteTR()"><span class="glyphicon glyphicon-remove"></span></div></td> function deleteTR(){ $("table#awardTable tr").click(function() { $(this).remove(); }); }; 我放在td里,不点删除都正常,点删除后点哪一行就删那行,不能往文本框填值。为什么会这样?应该点带onclick的td才会触发删除方法才对[/quote] <td><div style="width: 50px" onclick="deleteTR(this)"><span class="glyphicon glyphicon-remove"></span></div></td> function deleteTR(obj){ $(obj).closest("tr").remove(); }
天际的海浪 2018-05-14
  • 打赏
  • 举报
回复

        $("#awardTable").on("click", ".glyphicon-remove", function(event){
        	$(this).closest("tr").remove();
        });

-一个大坑 2018-05-14
  • 打赏
  • 举报
回复
还有一个问题,这种点一下增加一行的,没有id那么也是一样,我要怎么控制删除本行?

    function addAward(){
        var awardHtml=`<tr>
                    <td>
                        <div style="width: 50px">
                            <span class="glyphicon glyphicon-plus"></span>
                        </div>
                    </td>
                <td>                                
                        <div class="input-group" style="width: 250px">
                            <span class="input-group-addon">超期服务天数:</span>
                            <input type="text" class="form-control" name="IncentivePreRate" >
                        </div>
                    </td>
                    <td>
                        <div class="input-group" style="width: 250px">
                            <span class="input-group-addon">獎勵單價:</span>
                            <input type="text" class="form-control" name="IncentivePrice" placeholder="請輸入獎勵單價..." >
                        </div>
                    </td>
                    <td>
                        <div style="width: 50px" onclick="">
                            <span class="glyphicon glyphicon-remove"></span>
                        </div>
                    </td>
                </tr>`;
        $("#awardTable").append(awardHtml);
        if($(".my-layer2 .layui-layer-content").height()>350) {
            $(".my-layer2 .layui-layer-content").height('350px');
        }else{
            $(".my-layer2 .layui-layer-content").height('auto');
        }
    };
-一个大坑 2018-05-14
  • 打赏
  • 举报
回复
引用 1 楼 Free_Wind22 的回复:
用es6的字符串模板 var aaa = `<tr> ...`;
这个符号怎么打出来
2018-05-14
  • 打赏
  • 举报
回复
用es6的字符串模板 var aaa = `<tr> ...`;

87,843

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧