jquery如何创建style
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery如何创建style相关的知识，希望对你有一定的参考价值。
<style>
.mainleft:100px;height:200px
</style>
$('<style>').appendTo($('head'));
这样操作发生错误
style也可以看做普通的html节点，因此其创建方法与jQuery创建普通元素的方法相同，关键代码：
$("<style></style>").text("div#testcolor:red;").appendTo($("head"));下面实例演示——点击按钮创建新的style样式:
1、HTML结构
<div id="test">这是示例的DIV</div><input type="button" value="创建新的<style>">
2、jQuery代码
$(function()$("input[type='button']").click(function()
$("<style id='test_style'></style>").text("div#testcolor:red;").appendTo($("head"));
$("div#test").html($("div#test").text() + "<br>" + $("#test_style").text());
);
);
3、效果演示
.appendTo($(\'head\'));
这样。
本回答被提问者采纳 参考技术B 1.$("head").css(
"left": "100px"
, "height": "200px"
)
2.
$("head").addClass("className") 参考技术C $('style').appendTo($('head')); 参考技术D $(".main").addClass("main");追问
我是要创建站style
这里面可能有多少记录
$(".main").attr("style","left:100px;height:200px");
如何在jquery中将动态单选按钮添加到动态创建的表中
【中文标题】如何在jquery中将动态单选按钮添加到动态创建的表中【英文标题】：How to add dynamic radio button to dynamic created table in jquery 【发布时间】：2020-02-12 18:58:16 【问题描述】：我想将单选按钮添加到动态创建的表中。 这是我在其中添加动态创建的对象的 HTML 代码。
<div class="row container">
<div class=" col m12 l6 s12" style="height:200px; overflow:scroll;">
<table id="staff">
</table>
</div>
<div class=" col m12 l6 s12" style="height:200px; overflow:scroll;">
<table id="patient">
</table>
</div>
</div>
这是网站的 Jquery 代码
$.ajax(
type: "POST",
url: "/public/src/management/serverfile/selectstaffandpat.php",
dataType: "text",
error: function (request, error)
console.log(arguments);
alert(" Can't do because: " + error);
,
success: function (JSONObject)
var peopleHTML = "";
var tempjsonval = JSON.parse(JSONObject);
var str1 = "<tr><th colspan=\"4\">Staff</th></tr><tr><th>Select</th><th>ID</th><th>FirstName</th><th>LastName</th></tr>";
var count_staff = tempjsonval.staff.length;
var count_patient = tempjsonval.patient.length;
for (i = 0; i < count_staff; i++)
str1 += "<tr><td><input type=\"radio\" name=\"staff\" value=\"" +
tempjsonval.staff[i].s_id +
"staff\" ></input></td><td>" +
tempjsonval.staff[i].s_id +
"</td><td>" +
tempjsonval.staff[i].firstname +
"</td><td>" +
tempjsonval.staff[i].lastname +
"</td></tr>"
document.getElementById("staff").innerHTML = str1;
str1 = "";
str1 = " <tr><th colspan=\"3\">Patient</th></tr><tr><th>ID</th><th>FirstName</th><th>LastName</th></tr>";
for (i = 0; i < count_patient; i++)
str1 += "<tr><td>" +
tempjsonval.patient[i].p_id +
"</td><td>" +
tempjsonval.patient[i].firstname +
"</td><td>" +
tempjsonval.patient[i].lastname +
"</td></tr>"
document.getElementById("patient").innerHTML = str1;
);
);
已创建输入，但未显示单选按钮。谁能提供一种添加具有动态值的单选按钮的方法。 this is the image where I am getting this output
【问题讨论】：
只需在表中追加的 count_patient 对象中添加行str1 += "<tr><td><input type=\"radio\" name=\"patient\" value=\"" + tempjsonval.patient[i].p_id + "patient\" ></input></td><td>" +
我要问的是向员工添加单选按钮。 str1 += "请检查这个需要将一些 JSON 数据更改为 ajax 响应数据。
用于测试检查工作演示Click here
HTML 内容
<div class="row container">
<div class=" col m12 l6 s12" style="height:200px; overflow:scroll;">
<table id="staff">
</table>
</div>
<div class=" col m12 l6 s12" style="height:200px; overflow:scroll;">
<table id="patient">
</table>
</div>
</div>
Javascript 代码
var JSONObject = '"staff":["s_id":1,"firstname":"A","lastname":"B","s_id":1,"firstname":"A","lastname":"B"],"patient":["p_id":1,"firstname":"A","lastname":"B","p_id":1,"firstname":"A","lastname":"B"]';
var peopleHTML = "";
var tempjsonval = JSON.parse(JSONObject);
console.log(tempjsonval);
var str1 = "<tr><th colspan=\"4\">Staff</th></tr><tr><th>Select</th><th>ID</th><th>FirstName</th><th>LastName</th></tr>";
var count_staff = tempjsonval.staff.length;
var count_patient = tempjsonval.patient.length;
for (i = 0; i < count_staff; i++)
str1 += "<tr><td><input type=\"radio\" name=\"staff["+i+"]\" value=\"" +
tempjsonval.staff[i].s_id +
"staff\" ></input></td><td>" +
tempjsonval.staff[i].s_id +
"</td><td>" +
tempjsonval.staff[i].firstname +
"</td><td>" +
tempjsonval.staff[i].lastname +
"</td></tr>"
document.getElementById("staff").innerHTML = str1;
str1 = "";
str1 = " <tr><th colspan=\"3\">Patient</th></tr><tr><th>ID</th><th>FirstName</th><th>LastName</th></tr>";
for (i = 0; i < count_patient; i++)
str1 += "<tr><td><input type=\"radio\" name=\"patient["+i+"]\" value=\"" + tempjsonval.patient[i].p_id + "patient\" ></input></td><td>" +
tempjsonval.patient[i].firstname +
"</td><td>" +
tempjsonval.patient[i].lastname +
"</td></tr>"
document.getElementById("patient").innerHTML = str1;
输出
注意：您需要准备单选按钮唯一或动态的任一准备数组变量。
【讨论】：
我已将图像添加到我为员工获取的输出中。单选按钮。另外，我只希望在一个具有不同值的完整表中为所有单选按钮提供一个名称。 如果您放置相同的单选按钮名称，您不能选择多个您需要放置复选框。如果您想要一个单选按钮名称并存储您需要映射的所有选定值array object。
您好，非常感谢。代码运行良好。问题在于我正在使用的物化 CSS。它限制了我创建广播元素。
好的，兄弟喜欢:)【参考方案2】：
$.ajax(
type: "POST",
url: "/public/src/management/serverfile/selectstaffandpat.php",
dataType: "text",
error: function (request, error)
console.log(arguments);
alert(" Can't do because: " + error);
,
success: function (JSONObject)
var peopleHTML = "";
var tempjsonval = JSON.parse(JSONObject);
var str1 = `<tr><th colspan="4">Staff</th></tr>
<tr>
<th>Select</th>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
</tr>`;
var count_staff = tempjsonval.staff.length;
var count_patient = tempjsonval.patient.length;
for (i = 0; i < count_staff; i++)
str1 +=`<tr>
<td><input type="radio" name="staff" value="$tempjsonval.staff[i].s_id staff /></td>
<td>$tempjsonval.staff[i].s_id</td><td>
$tempjsonval.staff[i].firstname</td>
<td>$tempjsonval.staff[i].lastname</td></tr>`
document.getElementById("staff").innerHTML = str1;
str1 = "";
str1 = `<tr>
<th colspan="3">Patient</th>
</tr>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
</tr>`;
for (i = 0; i < count_patient; i++)
str1 +=`<tr>
<td>$tempjsonval.patient[i].p_id</td>
<td>$tempjsonval.patient[i].firstname</td>
<td>$tempjsonval.patient[i].lastname</td>
</tr>`
document.getElementById("patient").innerHTML = str1;
);
尝试使用模板文字，这是一个不错的功能
【讨论】：
以上是关于jquery如何创建style的主要内容，如果未能解决你的问题，请参考以下文章