Question

我有一个使用JQuery的示例程序

我在使用数据属性添加新表行时出现问题，应该在按钮之前或表行中显示。

JS：

var newhtml = '<table><tr><td>data1</td><td>data2</td><td>data3</td></tr><!--show here--><!--new table row added in clicking more--><tr><td></td><td></td><td><button>more</button></td></tr></table>';

$(".advanced-info").click(function(){
        console.log($("#" + $(this).attr("data-div")).html().length);
       if ($("#" + $(this).attr("data-div")).html().length > 0) {

         $("#" + $(this).attr("data-div")).empty();
       } else {
       $("#" + $(this).attr("data-div")).append(newhtml);
       }
    });

输出

我道歉我的问题不明确

Answer 1

你走了：

我已将.attr的用法更改为.data。

var newhtml = '<table><tr><td>data1</td><td>data2</td><td>data3</td></tr><tr><td></td><td></td><td><button>more</button></td></tr></table>';

$(".advanced-info").click(function() {
  console.log($("#" + $(this).attr("data-div")).html().length);
  if ($("#" + $(this).data("div")).html().length > 0) {
    $("#" + $(this).data("div")).empty();
  } else {
    $("#" + $(this).data("div")).append(newhtml);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' class='advanced-info' data-div='adv1'>Advanced Options</a>
<div id='adv1'></div>
<br/>
<br/>

<a href='#' class='advanced-info' data-div='adv2'>Advanced Options</a>
<div id='adv2'>
</div>
<br/>
<br/>



<a href='#' class='advanced-info' data-div='adv3'>Advanced Options</a>
<div id='adv3'></div>

Answer 2

试试这种方式。

public partial class Form1 : Form
{
    SerialComm arduino = new SerialComm();

    public Form1()
    {
        InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {    
        //Arduino
        arduino.InitialiseSerial();
        String[] portList = arduino.portList;
        foreach (String COM in portList)
        {
            comboBox1.Items.Add(COM);
        }

        if (portList.Length > 0)
        {
            comboBox1.SelectedItem = comboBox1.Items[0];
        }
        else
        {
            comboBox1.Text = "No microcontroller found!";
        }
    }

    private void button1_Click(object sender, EventArgs e)
    {
        arduino.StartMC(serialPort1, comboBox1.SelectedItem.ToString());

        //as the DataReceived never fires arduino.receivedData stays null
        if (arduino.receivedData != null)
        {
            for (int i = 0; i < 101; i++)
            {
                textBox1.AppendText(arduino.receivedData);
            }
        }        
    }

    private void Form1_FormClosing(object sender, FormClosingEventArgs e)
    {
        arduino.CloseMC();
    }
}

var newhtml = '<table><tr style="display:none;"><td>data1</td><td>data2</td><td>data3</td></tr><tr><td></td><td></td><td><button>more</button></td></tr></table>';

$(".advanced-info").click(function() {
  console.log($("#" + $(this).attr("data-div")).html().length);
  if ($("#" + $(this).attr("data-div")).html().length > 0) {

    $("#" + $(this).attr("data-div")).empty();
  } else {
    $("#" + $(this).attr("data-div")).append(newhtml);
  }
});

$("div").on("click", "button", function() {
  $(this).closest("table").find("tr:eq(0)").css("display", "table-row");
  $(this).hide();
});

希望这是你的需要！

jquery填充新的数据属性

2 个答案: