1、新建一个HTML页面，命名为test.html。
2、编写JS代码，将上面的JSON数据存储于JS变量JSONObject中，方便后面通过该变量取出JSON值。
3、编写HTML代码，定义四个span标签，用于后面将读取的JSON数据放入其中显示出来。
4、为了方便将JSON值在span标签内显示，每个span标签添加id属性，并设置专有的id值。
5、JSON数据是以对象为基础的数据，可以通过“JSON.名称”的方式取出值来。例如，下面把JSON的变量取出来并存于一个变量中。
6、通过使用document.getElementById的方法获得span对象，再把读取出来的JSON数据使用innerHTML方法显示在span标签中。
你直接用我的代码吧，我改了不少：
<body><form>
姓名：<input type="text" name="姓名" id="name" /> 成绩：<input type="text" name="成绩" id="score" /> <input type="button" id="saveBtn" value="保存" onclick= "Add()" />
</form>
<br />
<table width="100%" border="1" id="SmithTb">
<tr><td width="30%"><input type="checkbox" id="ckall" /> 选择</td><td width="30%">姓名</td><td width="40%">成绩</td></tr>
<tr><td><input type="checkbox" class="cbx" /></td><td width="30%">张三</td><td width="30%">70</td>
<tr><td><input type="checkbox" class="cbx" /></td><td width="30%">李四</td><td width="30%">90</td>
</table>
<script type="text/javascript" src="/include/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ckall").click(function(){
var th = $(this).is(":checked")
$(".cbx").each(function(){
$(this).attr("checked", th)
})
})
})
function Add(){
var name = $("#name").val()
var score = $("#score").val()
var isAdd = true
$(".cbx").each(function(){
if($(this).is(":checked")){
isAdd = false
$(this).parent("td").next("td").text(name)
$(this).parent("td").next("td").next("td").text(score)
}
})
if(isAdd)
$("#SmithTb").append('<tr><td><input type="checkbox" class="cbx" /></td><td width="30%">'+name+'</td><td width="30%">'+score+'</td></tr>')
}
</script>
</body>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）