Question

我正在尝试制作一个可以编辑的列表，而且我没有走得太远。

我希望它是一个标有UPDATE parentTable SET status = 0 WHERE ID = 1; SELECT * FROM childTable WHERE parent_id = 1;

的有序列表

到目前为止，我已经有了这个，已编号，但不包括其他标签。 https://jsfiddle.net/cqeah9tx/

我要做的是当点击该值时，用户可以编辑它，当他们点击该字段时，该值将被写回mysql。

我打算用JQuery AJAX事件将这个ID和值发送到php页面。

我遇到的问题是如何标记10,11,12,13＆amp; 14为0，A，B ,!和＃？以及如何使字段可编辑？

有什么想法吗？

Answer 1

只有HTML和CSS，你可以混合整数和字母，但你不能使用任意符号！和＃。

在CSS list-style-type中使用counter将整数更改为字母（例如li:before {content:counter(counter, upper-alpha)}）和counter-reset以及起始值（例如li {counter-reset: counter 0} ）不要订购如1 2 3 4 5 6 7 8 9 10 KLMN ......

这是一个最小的工作片段，展示了您需要的样式：

＆＃13;

ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: count
}
li {
  counter-increment: count
}
li:before {
  content: counter(count)
}
ol li:nth-child(10) {
  counter-reset: count -1
}
ol li:nth-child(n+11):before {
  content: counter(count, upper-alpha)
}
ol li:nth-child(13) {
  counter-reset: count 0
}
ol li:nth-child(n+13):before {
  content: counter(count, lower-greek)
}

＆＃13;

<ol>
  <li>Decimal starts here</li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li>This is zero</li>
  <li>Uppercase Latin starts here</li>
  <li></li>
  <li>Lowercase Greek starts here</li>
  <li></li>
  <li></li>
  <li></li>
</ol>

＆＃13;

我使用希腊语而不是你的任意符号。将来我们可能会使用建议的symbols() CSS函数（类似list-style: symbols(cyclic "!" "#" "$")）。目前您有两种选择：

坚持the supported list-style-types（查看链接，有很多内容）
或编写自定义函数，为每个data-添加自定义<li>属性，将li值转换为自定义标记，然后使用该值填充{{1 } {＆＃39; s li:before。令人惊讶的是@Blender已经在这个答案中写了这个脚本：https://stackoverflow.com/a/12082088/1241736

Answer 2

使用输入字段，无需过度操作：）

$('ol.rectangle-list a').click(function(e) {
		e.preventDefault();
    $(this).find('input').select();
});

$('ol.rectangle-list input').blur(function(e) {
    //$(this).attr('readonly', true);
    console.log('MAKE AJAX REQUEST');
    console.log($(this).val());
});

body{
				margin: 40px auto;
				width: 500px;
			}

			/* -------------------------------------- */

			ol{
				counter-reset: li;
				list-style: none;
				*list-style: decimal;
				padding: 0;
				margin-bottom: 4em;
				text-shadow: 0 1px 0 rgba(255,255,255,.5);
			}

			ol ol{
				margin: 0 0 0 2em;
			}

			/* -------------------------------------- */

			.rectangle-list a{
			  font: 15px 'trebuchet MS', 'lucida sans';
        color: #444;
				position: relative;
				display: block;
				padding: .4em .4em .4em .8em;
				*padding: .4em;
				margin: .5em 0 .5em 2.5em;
				background: #ddd;
				text-decoration: none;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;	
			}

			.rectangle-list a:hover{
				background: #eee;
			}	

			.rectangle-list a:before{
				content: counter(li);
				counter-increment: li;
				position: absolute;	
				left: -2.5em;
				top: 50%;
				margin-top: -1em;
				background: #fa8072;
				height: 2em;
				width: 2em;
				line-height: 2em;
				text-align: center;
				font-weight: bold;
			}
			
			.rectangle-list a:after{
				position: absolute;	
				content: '';
				border: .5em solid transparent;
				left: -1em;
				top: 50%;
				margin-top: -.5em;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;				
			}

			.rectangle-list a:hover:after{
				left: -.5em;
				border-left-color: #fa8072;				
			}
      
      .rectangle-list input{
        border: none;
        font: 15px 'trebuchet MS', 'lucida sans';
        color: #444;
        background: transparent;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="rectangle-list">
	<li><a href="#"><input type="text" value="List item"></a></li>
	<li><a href="#"><input type="text" value="List item"></a></li>
	<li><a href="#"><input type="text" value="List item"></a></li>
	<li><a href="#"><input type="text" value="List item"></a></li>
	<li><a href="#"><input type="text" value="List item"></a></li>
	<li><a href="#"><input type="text" value="List item"></a></li>			
	<li><a href="#"><input type="text" value="List item"></a></li>			
	<li><a href="#"><input type="text" value="List item"></a></li>			
	<li><a href="#"><input type="text" value="List item"></a></li>			
	<li><a href="#"><input type="text" value="List item"></a></li>			
	<li><a href="#"><input type="text" value="List item"></a></li>			
	<li><a href="#"><input type="text" value="List item"></a></li>			
	<li><a href="#"><input type="text" value="List item"></a></li>			
	<li><a href="#"><input type="text" value="List item"></a></li>			
</ol>

CSS样式可编辑列表？

2 个答案: